Kendo Chart Smart Step Example

This article is an example of dynamically changing the step of the category labels in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show the category labels of the bar chart without overlapping.

If you have a lot of bars in a chart with long category labels, there is strong chance of the labels overlapping. There is already a Kendo Chart documentation on how to prevent the categoryAxis from overlapping. The three workarounds are:

• Rotating the labels through categoryAxis.labels.rotation.angle
• Using label templates through categoryAxis.labels.template
• Reducing the number of displayed labels through step and/or skip

The above workaround could work if we didn't need to zoom in and out of our chart. In order for our Kendo Chart to look pretty (lables not overlapping), we need to make the label step smart. In our solution, we calculate an initial step so that the labels don't overlap. When the chart is zoomed in or out, we recalculate the step and redraw tha chart. One thing to note here is that we need to have a name for our category axis so that we can get the min and max axis ranges.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

Without a smart step:

Kendo Chart - labels overlapping

 

Initial chart with smart step:

Kendo Chart - smart step

 

Chart mid zoom:

Kendo Chart - smart step (mid zoom)

 

Chart zoomed in:

 

Kendo Chart - smart step (zoomed in)

There you have it. A quick and simple example of how to have a smart step Kendo Chart.