react stock chart slider update

[Shashank]

Hello,
I am using react stock chart in the project.
We can adjust min-max on X-Axis manually by dragging left or right.
I need to update the min & max of the slider on via an event after the chart got rendered.
For example, I want to provide different sets of min-max when a certain event occurs.

I am passing values via ref, but that doesn’t seem to be working

stockChartRef.current.options.navigator.slider.maximum = new Date(moment.unixSecondsToDate(chartSliderRange.minimum));

Is there an API or workaround available?
Thanks
Shashank

[Vishwas R]

Shashank,

Thanks for the reporting the use case, we are aware of this issue and we will be fixing it in our upcoming versions.

—
Vishwas R
Team CanvasJS

[Vishwas R]

[UPDATE]

We have just released StockChart v1.0.7 with this bug fix. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.

—
Vishwas R
Team CanvasJS

[Shashank]

Hello Vishwas,
Thank you the reply.
I m following this article for implementing react stock chart https://canvasjs.com/docs/stockcharts/integration/react/

With the new stcokchart library in place i m accessing set method like this
stockChartRef.current.options.navigator.slider.set('minimum', new Date(moment.unixSecondsToDate(chartSliderRange.maximum)));

On Execution it says

Uncaught TypeError: stockChartRef.current.options.navigator.slider.set is not a function

However on logging stockChartRef.current.options.navigator.slider I can see set() and get() methods under the prototype of the object.

Regards
Shashank

[Vishwas R]

Shashank,

Slider methods are accessible within the actual slider element and not the options of slider that you pass to StockChart. As mentioned in documentation stockChart.navigator.slider.set('minimum', new Date(2018, 01, 01)); should work fine in your case.

If you are still facing issue, kindly share sample project reproducing the issue you are facing & share it with us over Google-Drive or Onedrive along with sample / dummy data so that we can run it locally to debug at our end to understand the use-case better and help you resolve.

—
Vishwas R
Team CanvasJS