Shorten Chart Labels
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I make a long Kendo UI Chart label short to make it more structured and comprehensible?
Solution
The following example demonstrates how to shorten long Chart labels and turn them into a more readable format.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Series 1",
data: [10, 20, 30]
}],
categoryAxis: {
categories: ["Long category", "Very long category", "Very Very long category"],
labels: {
template: "#= shortLabels(value)#"
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
function shortLabels(value) {
if (value.length > 5) {
value = value.substring(0, 10);
return value + "...";
}
return value;
}
</script>