Chart height creeps up as window is resized

[paulkarpenko]

Hi, I love the chart, but I'm seeing an issue with responsiveness. I've got <ChartJS.Line data={data} options={options} height={100} /> with responsive: 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.

[RamonBeast]

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.

[paulkarpenko]

@jhudson8 Can you provide any insight here? Thanks.

[ashwinurao]

Setting display: block to the canvas fixes this issue as well.

[jtmkrueger]

yea, this is pretty brutal, and the display block doesn't seem to work for me :\

[jtmkrueger]

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.

[aslaugsollilja]

Having the same issue, any news on this?

[YashMeh]

Wrapping the chart around <div> worked for me. Also set

options=
{
maintainAspectRatio:false,
responsive:true
}

And then set the height={200} :smile:

[armandn]

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?