I’m using Bulma v0.6.2 CSS framework with vue-chartjs 3.2.1, trying to put a Line chart inside a Box container. My chartjs options are all correct and as advised for achieving responsiveness:
responsive: true,
maintainAspectRatio: false
I also use a container for my chart as advised (the chart-container class property):
<UserActivity
v-bind:chart-data="datacollection"
v-bind:options="graphOptions"
class="chart-container"
/>
with the following chart-container CSS:
.chart-container {
position: relative;
height: 40px;
}
but it seems like the chart ignores the parent element’s width:
I looked around found some hints that the issue may be related to Bulma and Flexbox. Did anyone encounter this issue?
EDIT: This jsfiddle reproduces the issue
https://jsfiddle.net/c6tu3qgx/1/
I’ve been through the other tickets on this, but this seems to be the survivor. My example is a simple case with a full-width table with a column containing a sparkline:
https://jsfiddle.net/0rg1jesx/
This is a trivial example; my purpose is to point at this defect, not to demonstrate a good way to use HTML. In live I have a Bootstrap grid with a table of data in it, and the table rows contain sparkline charts as well as other data.
The charts grow beautifully, but won’t shrink no matter what I try. Although its the same symptom as this apparent “flexbox” thing the problem persists even when the flexbox is removed. That’s not the root issue.
I had all of the symptoms detailed above but this hacky fix seems to work fine. I have 4 charts displayed in a flexbox row shrinking perfectly.
canvas {
width: 100%% !important;
}