Chart.js: 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:

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/

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

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

labelworx on Sep 29, 2019

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.

phil-w on Jun 25, 2018

Isn’t it the same issue as #4156 or #5397, some missing min-width: 0 on flex elements?

simonbrunel on Apr 12, 2018