Place Labels under Panes in the CategoryAxis of the Chart
Environment
| Product | Progress® Kendo UI® Chart for jQuery | 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>