CODEWITHSUNDEEP
htmlcsshighcharts
TheRealPapa
TheRealPapa

Reputation: 4539

Highcharts exceeding width of parent on Chrome only

I have a few charts on a page, each in its own bordered box. All charts on first page load exceed the width of their parent.

If I resize the page width slightly, it all goes back to how it should be. The strange thing is this is showing up only on latest Chrome version. Safari an FF are working well.

Another strange issue is that if I empty cache and hard reload in Chrome, it loads OK. Refresh the page, and the charts bleed to the right of their container.

I have tried this CSS from research:

.highcharts-container {
  width:100% !important;
  height:100% !important;
}

But this screws up the tooltip on Chrome and other browsers too.

Any sugegstions welcome.

Upvotes: 0

Views: 1693

Answers (1)

Rahul
Rahul

Reputation: 4374

in addition to your rest of css apply max-width: 100%; to your div like below

.highcharts-container {
  max-width:100%;
}

Upvotes: 5

Related Questions