dioguito
Posts: 4
Joined: Wed Sep 04, 2024 1:18 pm

Scrollbar is appearing on the wrong side after data update

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.
Attachments
Screenshot 2024-09-04 at 14.56.58.png
Screenshot 2024-09-04 at 14.56.58.png (41.07 KiB) Viewed 1055 times
dioguito
Posts: 4
Joined: Wed Sep 04, 2024 1:18 pm

Re: Scrollbar is appearing on the wrong side after data update

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 ) ??
Attachments
Screenshot 2024-09-05 at 18.35.25.png
Screenshot 2024-09-05 at 18.35.25.png (32.14 KiB) Viewed 1002 times
User avatar
dawid.d
Site Moderator
Posts: 1119
Joined: Thu Oct 06, 2022 11:31 am

Re: Scrollbar is appearing on the wrong side after data update

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!
Dawid Draguła
Highcharts Developer
dioguito
Posts: 4
Joined: Wed Sep 04, 2024 1:18 pm

Re: Scrollbar is appearing on the wrong side after data update

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
User avatar
dawid.d
Site Moderator
Posts: 1119
Joined: Thu Oct 06, 2022 11:31 am

Re: Scrollbar is appearing on the wrong side after data update

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
Dawid Draguła
Highcharts Developer
dioguito
Posts: 4
Joined: Wed Sep 04, 2024 1:18 pm

Re: Scrollbar is appearing on the wrong side after data update

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 ?
User avatar
dawid.d
Site Moderator
Posts: 1119
Joined: Thu Oct 06, 2022 11:31 am

Re: Scrollbar is appearing on the wrong side after data update

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.
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”