Animated updating of chart timeScale without recreating the chart.

[sulhadin]

I am trying to update the timeScale of the chart without recreating it. Currently, it seems like I have to recreate the entire chart to change the timeScale, which isn't optimal for performance.

This feature would be especially helpful in cases where the chart is continuously receiving new data and needs to adjust the timeScale frequently. An animated transition would make these changes less jarring for users.

[SlicedSilver]

Hi @sulhadin, Could you be a bit more specific about what you are trying to change with the timescale? Perhaps if you can share an example of your current implementation?

You shouldn't need to recreate the chart (or the timescale) for any changes to the chart. The series api includes an update() method for providing new data to an existing series, and the ITimeScaleApi has many methods for adjusting the time scale and it's options.

The library can scroll new updates to the chart into view. scrollToRealTime, or shitVisibleRangeOnNewBar

[sulhadin]

Hi @SlicedSilver

I am using THIS implementation which uses the useEffect hook. As such, the chart gets recreated each time any of the states data, backgroundColor, lineColor, textColor, areaTopColor, areaBottomColor change. Moreover, I've added timeScale as an option:

   const chart = createChart(
        chartContainerRef.current,
          ....
          timeScale,
        }),

Upon updating timeScale, the useEffect hook is triggered and createChart re-initiates the chart creation. I'm curious if there's a means to animate the transition between different timeScale options? Alternatively, is there a different approach to change the timeScale without recreating the entire chart? Any guidance or suggestions would be greatly appreciated.

[SlicedSilver]

You shouldn't need to create a new chart for each option change. It would be better to create the chart once within the React component (and only remove it when the React component is removed). If any of the properties change (options change) then you could apply them to the existing chart instance by using the applyOptions() method. Discussed further in this tutorial: https://tradingview.github.io/lightweight-charts/tutorials/customization/chart-colors#applying-options

Which specific timescale option are you changing that you would like to animate? rightOffset is essentially the same as scrolling left or right. So the scrollToPosition method could help with this. barSpacing is essentially the zoom level which could be set using the setVisibleLogicalRange

---

I see that the example React component you are using is our example in the documentation. We should update that example to implement better practices. Apologies, that example focused more on simplicity than performance when changing properties. We will improve the example.