0

I'm trying to to add a scrollBar on xAxis through chart.scrollablePlotArea to my chart but it's not working as expected. I was having trouble to make it appear. The solution I found was to remove containerProps from my react-component

containerProps={{
  className: "chart",
  style: {
    height: "500px",
    minWidth: "280px"
  }
}}

With that the scrollBar appeared, but some unexpected behaviors occured, first the fullScreen broke (It started showing up black bars), second the customButton started moving around with the chart. I searched on exporting.buttons.contextButton API but couldn't find any property to fix its position.

Here is a working demo, appreciate any help.

Bernardo Marques
  • 925
  • 2
  • 10
  • 33

1 Answers1

0

The solution I found was to remove containerProps from my react-component

It seems that scrollablePlotArea works fine without removing the containerProps, but the container width must be smaller than set scrollablePlotArea.minWidth.

first the fullScreen broke (It started showing up black bars)

It is a bug which has been already fixed. Will available in the Highcharts npm after the next release.

https://github.com/highcharts/highcharts/issues/12832

second the customButton started moving around with the chart

How did you find this feature? It seems that customButton is not available in the API, which means that is not fully supported.

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • What is the container width? the one defined on `cointainerProps`? I was trying with that width smaller than `scrollablePlotArea.minWidth`, going on mobile view would allow me to scroll it with touch gesture but there was no scrollbar. About the `customBotton` I'm not sure, probably found it as a workaround on some old forum post. – Bernardo Marques May 01 '20 at 13:16
  • Yes, the container width could be set in the `containerProps`. By saying the container width I had in mind any style width options set on the container. The `scrollablePlotArea.minWidth` is a value under which scrollablePlotArea feature is applied. So if you don't have the fixed style width value (the chart is responsive) feature will be applied only if width has been changed to a lower value. – Sebastian Wędzel May 04 '20 at 13:08