Customization of Donut and Bar charts

[Matteo]

Hello, I am using Kendo React Library.

 

I'm having some issues with the customization of the charts:

  - I have created a donut chart and I need to animate each slice on mouse-over event scaling the slice as shown in the picture attached.

  - I have a bar chart and I need to change the style of the Category Axis Label when the mouse is over a series. I have discovered in the docs that a highlight object exists on the ChartSeriesItem but in the toggle function I do not know how to trigger the change of style for the category label.

 

Thanks

-- Matteo

[Vladimir Iliev]

Hello Matteo,

 

Please check the answers of your questions below:

- This could be achieved by either creating custom visuals for the hovered item, or by dynamically update the `explode` property of the series data item (easiest way, however keep in mind that it redraws the Chart on each hover). I created small example showing how to update the `explode` property:

   - https://stackblitz.com/edit/react-lv99ek?file=app/main.jsx 

- It's possible to update the label on category hover by defining custom visual for the category label in order to save the created visual in map by category name. Then inside the Chart Series Highlight function you can get the label for current series and update it's styles. For your convenience I created small example which you can use as baseline to achieve the desired behavior: 

   - https://stackblitz.com/edit/react-7cmtxw?file=app/main.jsx 

Regards,
Vladimir Iliev
Progress Telerik

[Matteo]

Thanks.

The second answer resolves the problem. In regards to the first answer, could you give me a hint on how to create a custom visual for the donut chart?

 

[Stefan]

Hello, Matteo,

I`m glad to hear that the second example from my colleague resolved the issue.

As for the question - The visual can be done using the series visual prop:

https://www.telerik.com/kendo-react-ui-develop/components/charts/api/ChartSeriesItemProps/#visual

This allows rendering any custom visual drawings instead of the original visual.

More details drawing can be found here:

https://www.telerik.com/kendo-react-ui-develop/components/drawing/

As the explode property is built-in for the Chart it allows easier integrations as it only needed to be set to true and false, where the visual requires drawing the element programatically.

Regards,
Stefan
Progress Telerik