Scrollbar is appearing on the wrong side after data update

[dioguito]

I have a spline graph that supports both 1 year series data points and also 3 years on a react application.

When the graph has a certain length of data points it should be scrollable to the left ( user should see newer data ). I have a button that switches these different timelines. However after 1 or 2 switches the graph automatically slides all the way to the left.

chart: {
scrollablePlotArea: {
minWidth: getGraphMinWidthValue(),
scrollPositionX: 1,
},
spacingBottom: 30,
spacingLeft: 30,
spacingRight: 30,
spacingTop: 10,
type: 'areaspline',
}

I can provide more of the config and also a little note: data is being updated with a useState and with mocked data.

[dioguito]

I think the problem is happening by updating the minWidth dynamically with this

Code: Select all

  
  function getGraphMinWidthValue() {
    // After this number of points, the graph will start to grow to be scrollable
    const maximumPointsAllowed = 24;
    // Default minimum width for the graph in pixels
    const defaultMinWidth = 750;
    // Default spacing between points in pixels
    const defaultSpacingBetweenPoints = 48;

    // If the data length is bigger than the maximumPointsAllowed make the graph grow so it is scrollable
    return seriesData.length <= maximumPointsAllowed
      ? defaultMinWidth
      : seriesData.length * defaultSpacingBetweenPoints;
  }
  

I don't know why. Is there a problem with updating this dynamically or is there a better way to make the graph scrollable like in the image ( depending on the length of the data set ) ??

[dawid.d]

Hi,

Welcome to the forum and thank you for reaching out.

Can you make a minimal reproducible demo so I can investigate this issue on my end? It's possible this is a bug, but I'm unfortunately limited in my ability to reproduce your problem because I lack context a bit.

You can use e.g. JSFiddle: https://jsfiddle.net/BlackLabel/0pbeym97/

Best regards!

[dioguito]

Yes, thanks for the reply. I've also opened a github issue on https://github.com/highcharts/highcharts/issues/21795


There's a little bit more detail there. This is the playground https://playcode.io/1995580

If this is in fact a problem I wonder if there is a workaround to achieve the same result without the minWidth, i've tried a lot of other options and all failed :/

Thanks in advance <3

[dawid.d]

Hmm, this is a bizarre case. I think we can treat it as a bug.

I've simplified it a bit and it looks like it would also occur without updating the data.
https://jsfiddle.net/BlackLabel/47voxu52/

Anyway, thanks for reporting this on GitHub, the dev team will look into it soon.

Best regards

[dioguito]

Thanks for support !! If you need anything from me ping me here or on github I'll be "listening"-

Do you know usually what is the time it takes to fix this ?

[dawid.d]

You're welcome! It's difficult to predict the exact time the dev team will fix this issue, but in the meantime, I prepared a workaround for you: https://jsfiddle.net/BlackLabel/vxq406dL/.

I hope it helps, but feel free to let me know if you need further assistance.