# Shorten Chart Labels

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Chart for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>Windows 10 64bit</td>
 </tr>
 <tr>
  <td>Visual Studio Version</td>
  <td>Visual Studio 2017</td>
 </tr>
 <tr>
  <td>Preferred Language</td>
  <td>JavaScript</td>
 </tr>
</table>

## Description

How can I make a long Kendo UI Chart label short to make it more structured and comprehensible?

## Solution

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

```dojo
    <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 + "...";
        }

        return value;
      }
    </script>
```

## See Also

* [Chart JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/dataviz/ui/chart)
* [Drawing API](https://www.telerik.com/kendo-jquery-ui/documentation/framework/drawing/overview)
* [Aggregate Data in Pie Charts](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/pie-chart-aggregates)
* [Draw on Scatter Plots Surface](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/draw-on-scatter-plots)
* [Expand Clickable Area of Points](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/expand-clickable-area)