-
I'm using
I also use a container for my chart as advised (the
with the following
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 |
Beta Was this translation helpful? Give feedback.
Replies: 15 comments
-
I see this issue too, both using flexbox with flex-grow and with |
Beta Was this translation helpful? Give feedback.
-
I was able to get the widths to be respected with flexbox fine. .team-item {
display: flex;
position: relative;
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
padding: 20px;
margin-bottom: 15px;
}
.team-item__sentiment {
flex: 0 1 20%;
width: 20%;
height: 40px;
margin: -10px 0;
position: relative;
} <div class="team-item">
<!-- some other dom -->
<div class="team-item__sentiment">
<canvas class="sentiment-spark"></canvas>
</div>
<!-- some other dom -->
</div> // chart options
{
responsive: true,
maintainAspectRatio: false,
} |
Beta Was this translation helpful? Give feedback.
-
My widths are being respected when the page renders or grows, but things go pear-shaped when you make the window narrower |
Beta Was this translation helpful? Give feedback.
-
Isn't it the same issue as #4156 or #5397, some missing |
Beta Was this translation helpful? Give feedback.
-
Closing as duplicate |
Beta Was this translation helpful? Give feedback.
-
nope, |
Beta Was this translation helpful? Give feedback.
-
It works but your canvas is not in a dedicated |
Beta Was this translation helpful? Give feedback.
-
now I place chart in dedicated div with no other elements, chart is not responsive when view width > 768px (it's breakpoint). chart still responsive in view width < 768px because parent element is became |
Beta Was this translation helpful? Give feedback.
-
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: 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. |
Beta Was this translation helpful? Give feedback.
-
I'm having the same issue with bootstrap, we're in 2019 now. Any good examples of chart.js working with flexbox? grow works, shrink goes nuts. Nevermind, changed to flot.js since it works better. No response from chart.js team anyways. |
Beta Was this translation helpful? Give feedback.
-
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 { |
Beta Was this translation helpful? Give feedback.
-
@labelworx is a hero! |
Beta Was this translation helpful? Give feedback.
-
Yup, that fixes it, it overrides the absolutel width set by chart.js. Thanks! |
Beta Was this translation helpful? Give feedback.
-
canvas{ |
Beta Was this translation helpful? Give feedback.
-
Setting |
Beta Was this translation helpful? Give feedback.
Setting
overflow: hidden
to the parents makes the chart able to shrink too: https://jsfiddle.net/h532o9gq/ (using v3-beta.4)