Customization of Donut and Bar charts

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

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?

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