Open paulkarpenko opened 8 years ago
Hi, I have noticed this behaviour too and it's quite annoying, for the time being I "solved" it by setting in options:
responsive: false, maintainAspectRatio: true
It doesn't really solve the issue, but at least it's better than having the chart change its size for every window resize.
@jhudson8 Can you provide any insight here? Thanks.
Setting display: block
to the canvas fixes this issue as well.
yea, this is pretty brutal, and the display block doesn't seem to work for me :\
So I figured out what I needed to do here. Just wrap the ChartComponent
in an surrounding div and give it the styles you want.
<div className="chart-container">
<ChartComponent
type='horizontalBar'
data={this.state.chartData}
height={14}
options={options}
/>
</div>
then in your css file:
.chart-container {
position: relative;
height:90px;
width:100%;
}
This seemed to get rid of all my issues! The key was setting the position: relative;
on the surrounding div.
Having the same issue, any news on this?
Wrapping the chart around <div>
worked for me.
Also set
options=
{
maintainAspectRatio:false,
responsive:true
}
And then set the height={200}
:smile:
I created a wrapper div with
height: 400px;
width:100%;
position: relative;
and I set
responsive: true,
maintainAspectRatio: false
however, the chart only expands in width. If I increase the width of the browser window, the chart width increases as well. If I decrease the width, the chart stays the same.
Any ideas?
Hi, I love the chart, but I'm seeing an issue with responsiveness. I've got
<ChartJS.Line data={data} options={options} height={100} />
withresponsive: true, maintainAspectRatio: false
and though the chart renders fine and resizes with the window, as the window is resized, the height of the chart creeps higher and higher. If I resize the window back and forth in place, the chart eventually grows to the height of the screen.