# Show Chart Category Axis Labels on Multiple Lines

## 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 display long labels in a Kendo UI Chart and make the content look more compact and better organized?

## Solution

It is possible to break the content of the Chart labels into multiple lines.

The following example demonstrates how to insert newline symbols in the Category Axis labels to achieve this behavior.

```dojo

    <div id="chart"></div>
    <script>
      var data = [{
        value: 1,
        category: "Category Foo"
      },{
        value: 2,
        category: "Category Bar"
      }, {
        value: 3,
        category: "Category Baz"
      }];

      $("#chart").kendoChart({
        dataSource: {
          data: data
        },
        series: [{
          type: "column",
          name: "Series Name",
          field: "value"
        }],
        categoryAxis: {
          field: "category",
          labels: {
            template: labelTemplate
          }
        }
      });

      function labelTemplate(e) {
        return e.value.split(" ").join("\n");
      }
    </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)