Autoscroll highchart on new data only if user sees last data

Question

I have highstock in react application. I've added historical data upload functionality. My problem is that I need to add both historical data and new data which could happen simultaneously. I need to understand where user on the chart currently. If chart was scrolled and user sees historical data I need to do nothing in case of new data was added. But if user sees latest data and chart got new data (not historical one) I need to autoscroll graph to show last data. Of course user can scroll graph back and forward. I was trying to change extremes with next condition:

if ( extremes.userMax === oldMax && extremes.userMax < dataMax ) {
 e.target.xAxis[ 0 ].setExtremes(
    dataMax - ( userMax - userMin ),
    dataMax
 );
}

but it doesn't work.

Is it possible to determine current user position on the chart?

Code above was added as event callback for redraw.

Hi @Anton Panteleev, Could you add more code that you use? `setExtremes` and `getExtremes` methods should be enough. Please check this example: http://jsfiddle.net/BlackLabel/6m4e8x0y/4882/ — ppotaczek, Feb 20 '20 at 11:46

Anton Panteleev · Answer 1 · 2020-02-21T08:17:18.863

Thank you for response.

Here is full code I use to automatically scroll chart:

if ( e.target.xAxis ) {
   const extremes = e.target.xAxis[ 0 ].getExtremes();
   const { userMax, userMin, oldMax, dataMax } = e.target.xAxis[ 0 ];
   if ( extremes.userMax === oldMax && extremes.userMax < dataMax ) {
   e.target.xAxis[ 0 ].setExtremes(
      dataMax - ( userMax - userMin ),
      dataMax
   );
}

May be I need to clarify how I store and change data in redux. All chart data placed in array:

[{
  open(pin):1
  high(pin):3
  low(pin):1
  close(pin):2
  volume(pin):10
  x(pin):1581850800000
}, ...
]

So if I need to upload historical data from server I just add data to the beginning of array. In case I need to add new candle to chart I just push new element in the end of array. Chart component gets new series array through redux update.

UPD:

I finally solved my problem with next logic in redraw event:

            if ( dataMax - userMax < pointRange * 2 ) {
                e.target.xAxis[ 0 ].setExtremes(
                    dataMax - ( userMax - userMin ),
                    dataMax,
                    false
                );
            }

The idea is to check how many candles out of user view and if there are more than 2 just do nothing otherwise move chart to show latest candles. false in setExtremes needs to avoid endless redraw.

Autoscroll highchart on new data only if user sees last data

1 Answers1