2

I have a couple of Highcharts charts on my web application. It's a Laravel and Vue.js application (built on the top of Laravel Spark). I am using Highcharts 6.1.1 and vue2-highcharts (uperman66/vue-highcharts).

When I resize the width of the browser (a practical case is changing orientation on a mobile device), I see that the height of the chart keeps on increasing. And, I guess as a result of which, Highcharts keeps decreasing tickInterval (which was not set - default value) of yAxis.

Here is how it looks when the page loads:

When page loads

But after resizing the width:

Top of the chart after resizing

Bottom of the chart after resizing

Well, the chart was too high to take one screenshot.

I tried to reproduce the error in CodeSandbox, it is working fine there. Any idea why is it happening like this?

Debiprasad
  • 5,895
  • 16
  • 67
  • 95
  • I can only answer this for ChartJS, where you need to set two options: `responsive: true` and `maintainAspectRatio: false`. I suppose there is an equivalent for HighCharts. The problems occurs from Vue redrawing the canvas. More information: https://github.com/jtblin/angular-chart.js/issues/84 – Bennett Dams Jul 10 '18 at 15:46
  • 1
    @BennettDams Not sure how to set `responsive: true` and `maintainAspectRatio: false` in HighCharts or vue2-highcharts. But I found a workaround. I am explicitly setting up the height to 400 and it works. Thank you. – Debiprasad Jul 12 '18 at 07:53

1 Answers1

0

I still don't know why Highcharts is behaving like this but I got a workaround. I am have explicitly set the height of the chart to 400 and it works now. 

...
chart: {
    ...
    height: 400
},
...
Debiprasad
  • 5,895
  • 16
  • 67
  • 95