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?

Solution

In order to place the CategoryAxis labels below each pane, 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"
          },
        }]
    <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