chart js flexbox width ignored

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:

enter image description here

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/

Author: Fantashit

2 thoughts on “chart js flexbox width ignored

  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.

  2. 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;
    }

Comments are closed.