Edit this page

Shorten Chart Labels

In some scenarios, you might need to make a long Kendo UI Chart label short to make it more structured and comprehensible.

The example below demonstrates how to shorten long Chart labels and turn them into a more readable format.

Example
    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        title: {
          text: "Gross domestic product growth /GDP annual %/"
        },
        legend: {
          position: "top"
        },
        seriesDefaults: {
          type: "column"
        },
        series: [{
          name: "Series 1",
          data: [10, 20, 30]
        }],
        categoryAxis: {
          categories: ["Long category", "Very long category", "Very Very long category"],
          labels: {
            template: "#= shortLabels(value)#"
          }
        },
        tooltip: {
          visible: true,
          format: "{0}%",
          template: "#= series.name #: #= value #"
        }
      });
      function shortLabels(value) {
        if (value.length > 5) {
          value = value.substring(0, 10);
          return value + "...";
        }
      }
    </script>

See Also

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy