search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

chart.scrollablePlotArea not showing scroll in Nuxt.js #187

Closed MaxPowerReforged closed 3 years ago

MaxPowerReforged commented 3 years ago

Hi! I am trying to get a wide chart to be responsive on mobile. I tried using chart.scrollablePlotArea with minWidth, but the chart stays bigger than its container, and the scrollbar doesn't appear.

I'll try to provide a sample as soon as possible, thanks!

Denyllon commented 3 years ago

Hi @MaxPowerReforged

Thank you for contacting us. You're right, that would be great to take a look on the real example of the problem, because I produced the demo with scrollable plot area, and it works like a charm. Here is it: https://codesandbox.io/s/highcharts-vue-demo-forked-ev4fe

It might be even much easier to you to reproduce the issue basing on that demo, so feel free to start from this point.

Kind regards!

MaxPowerReforged commented 3 years ago

Hi! Thanks for taking the time to make a sandbox and help :) I created a minimal Sandbox using Nuxt.js and the same configuration for the chart that you provided. The problem seems to be related to the type of chart: Using "spline" works great, however when I change to "line", the scroll stops working: https://codesandbox.io/s/magical-hugle-xrb5e?file=/pages/index.vue

MaxPowerReforged commented 3 years ago

Update: I played around a bit more with the sandbox and line chart worked sometimes too. I managed to get it working by wrapping my chart into a div with "width= 100% overflow=auto". Maybe some of my CSS was unexpectedly interacting with the chart CSS. Thank you very much for your time and help :)