Calculating Optimal Step Value for Kendo UI for jQuery Chart Labels

Updated on Jan 26, 2026

Environment

Product	Kendo UI for jQuery Chart
Version	2025.4.1217

Description

I am using the Kendo UI for jQuery Chart and need to dynamically calculate the step value for the categoryAxis labels to avoid label overlap. The configuration options for labels.skip and labels.step require fixed values and do not auto-adjust based on the available space. I want to achieve an automatic adjustment of the step value based on the chart's width and the label size.

This knowledge base article also answers the following questions:

• How to prevent label overlap in Kendo UI for jQuery Chart?
• How to calculate step dynamically for Kendo Chart labels?
• How to set step value for categoryAxis labels based on chart width?

Solution

To dynamically calculate the step value for categoryAxis labels, follow these steps:

1. Measure the chart's width and determine the number of categories.
2. Estimate the minimum label width required to avoid overlap. This depends on your font size and label length.
3. Calculate the maximum number of labels that can fit within the chart width.
4. Set the labels.step value programmatically based on the calculated number of labels.

Here is a runnable example:

<div id="chart"></div>
    <script>
      function calcStep() {
        var chart = $("#chart").data("kendoChart");
        var chartWidth = $("#chart").width();
        var categoriesCount = chart.options.categoryAxis.categories.length;

        // Adjust this value based on your label font and length
        var minLabelWidth = 60;

        var maxLabels = Math.floor(chartWidth / minLabelWidth);
        var stepValue = Math.max(0, Math.ceil(categoriesCount / maxLabels) - 1);

        chart.setOptions({
          categoryAxis: {
            labels: {
              step: stepValue,
            },
          },
        });
      }
      let categories = [];
      let data = [];
      for (var i = 0; i <= 100; i++) {
        const randomNumber = Math.floor(Math.random() * 1000) + 1;
        categories.push("Cat " + i);
        data.push(randomNumber);
      }

      $("#chart").kendoChart({
        categoryAxis: {
          categories: categories,
          title: {
            text: "Quarters",
          },
        },
        series: [{ data: data }],
      });

      calcStep()

      $(window).resize(function(){
        calcStep()
      })
    </script>

Key Notes:

• minLabelWidth should be fine-tuned based on your label font size and content.
• Ensure the chart.setOptions method is used to apply the calculated step value.

See Also

• Kendo UI for jQuery Chart Documentation
• Chart API Reference