Place Labels under Panes in CategoryAxis

Environment

Product Chart for ProgressĀ® Kendo UIĀ®
Product Version 2019.2.514

Description

How can I position the categoryAxis labels below multiple panes in a Kendo UI Chart?

Solution

Set the categoryAxis.labels.position configuration to start.

        categoryAxis: [{
          categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
          pane: "bottom-pane",
          labels: {
            position: "start"
          },
        },{
          categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
          pane: "top-pane",
          labels: {
            position: "start"
          },
        }]

The following example demonstrates the full implementation of the suggested approach.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [
          { data: [1, 2, 3] },
          { data: [1, 2, 3, 4], axis: "bottom" }
        ],
        valueAxis: [
          { pane: "top-pane" },
          { pane: "bottom-pane", name: "bottom" }
        ],
        panes: [
          { name: "top-pane" },
          { name: "bottom-pane" }
        ],
        categoryAxis: [{
          categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
          pane: "bottom-pane",
          labels: {
            position: "start"
          },
        },{
          categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
          pane: "top-pane",
          labels: {
            position: "start"
          },
        }]
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article