This is a migrated thread and some comments may be shown as answers.

Customization of Donut and Bar charts

3 Answers 324 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Matteo
Top achievements
Rank 2
Matteo asked on 24 Sep 2020, 12:53 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 25 Sep 2020, 10:06 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Matteo
Top achievements
Rank 2
answered on 25 Sep 2020, 02:06 PM

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?

 

0
Accepted
Stefan
Telerik team
answered on 28 Sep 2020, 12:37 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
General Discussions
Asked by
Matteo
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Matteo
Top achievements
Rank 2
Stefan
Telerik team
Share this question
or