Customization of Donut and Bar charts

4 posts, 2 answers
  1. Matteo
    Matteo avatar
    2 posts
    Member since:
    Sep 2020

    Posted 24 Sep 2020 Link to this post

    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

  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 25 Sep 2020 Link to this post

    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/.

  3. Matteo
    Matteo avatar
    2 posts
    Member since:
    Sep 2020

    Posted 25 Sep 2020 Link to this post

    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?

     

  4. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 28 Sep 2020 Link to this post

    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).

Back to Top