Dynamically set major units of Bar Chart value axis

2 posts, 0 answers
  1. David
    David avatar
    31 posts
    Member since:
    Sep 2019

    Posted 24 Nov 2020 Link to this post

    Hi,

    Could you please provide an example of how to dynamically set the major units of the value axis of a bar chart? I have tried using the onRender method but this ignores changes to options and blows up if you trigger a chart redraw.

    If it helps, what I am trying to achieve is to stop the major units from having decimal places i.e. I would like to set a minimum major unit for the value axis. The data I am showing can only ever be whole numbers but if the chart has small or no values then the axis major units and max have decimal places as per the attached screenshot.

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 25 Nov 2020 Link to this post

    Hello, David,

    In this case, we can suggest setting a majorUnit props, this will ensure that major units will be whole numbers.

    https://www.telerik.com/kendo-react-ui/components/charts/api/ChartValueAxisItemProps/#toc-majorunit

    You can dynamically calculate its value based on the data and bing it to the state. Then when the data changes, calculate it again and update the state. This can be done on componentDidUpdate or a useEffect hooks, that will monitor for data changes.

    Providing an example could be misleading as the calculation on the setup will depend onthe application. If there are specific issues using this approach, please share an example with the issue and I will be happy to provide a suggestion best suited for it.

    Regards,
    Stefan
    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/.

Back to Top