Edit this page

Show Category Axis Labels on Multiple Lines

Sometimes you might need to display long labels in a Kendo UI Chart. To make the content look more compact and better organized, it is possible to break the content of the labels into multiple lines.

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

Example

    <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

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