Hi,
I am trying out the stockchart for react.
Have looked through the documentation and I wish you had more customization examples. Therefore I have a few questions and if you could please reply with actual syntax or example.
1. How do I change the colors of Bullish and Bearish Candles
2. Can I hide/skip the chartnavigator completely including the hint line?
3. I tried to update the chart with live data and it animates the chart everytime I set the binding, is there any settings to disable redraw animation?
Thank you in advance!
1 Answer, 1 is accepted
0
Hello, Amir,
Regarding the questions:
1) How do I change the colors of Bullish and Bearish Candles. - The Candle color can be change using the seriesitem.color property. Please have in mind that this will customize only one color:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesItemProps/#toc-color
https://stackblitz.com/edit/react-2qxjmh?file=app/main.jsx
2) . Can I hide/skip the chartnavigator completely including the hint line? - The ChartNavigator can be hidden using it visible property:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartNavigatorProps/#toc-visible
3) . I tried to update the chart with live data and it animates the chart everytime I set the binding, is there any settings to disable redraw animation? - This can be achieve by using the transitions property of the Chart:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartProps/#toc-transitions
This is an example of all of them applied:
https://stackblitz.com/edit/react-2qxjmh?file=app/main.jsx
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Regarding the questions:
1) How do I change the colors of Bullish and Bearish Candles. - The Candle color can be change using the seriesitem.color property. Please have in mind that this will customize only one color:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesItemProps/#toc-color
https://stackblitz.com/edit/react-2qxjmh?file=app/main.jsx
2) . Can I hide/skip the chartnavigator completely including the hint line? - The ChartNavigator can be hidden using it visible property:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartNavigatorProps/#toc-visible
3) . I tried to update the chart with live data and it animates the chart everytime I set the binding, is there any settings to disable redraw animation? - This can be achieve by using the transitions property of the Chart:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartProps/#toc-transitions
This is an example of all of them applied:
https://stackblitz.com/edit/react-2qxjmh?file=app/main.jsx
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items