Use HTML for Axes Labels in Charts
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 use HTML for the categoryAxis.labels configuration of the Chart?
Solution
The following example demonstrates how to achieve this through the visual option.
<div id="chart"></div>
<script>
var data = [{
value: 1,
category: "Alpha 1"
},{
value: 2,
category: "Alpha 2"
}, {
value: 3,
category: "Alpha 3"
}, {
value: 4,
category: "Alpha 4"
}, {
value: 3,
category: "Alpha 5"
}, {
value: 4,
category: "Alpha 6"
}];
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
dataSource: {
data: data
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Series Name",
field: "value"
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
field: "category",
labels: {
visual: function(e) {
// Build an HTML fragment and append it to the body
var html = $('<div>Category <b>' + e.text + '</b></div>')
.appendTo(document.body);
// Create an empty group that will hold the rendered label
var visual = new kendo.drawing.Group();
// Store a reference to the target rectangle, see below
var rect = e.rect;
kendo.drawing.drawDOM(html)
.done(function(group) {
// Clean-up HTML fragment
html.remove();
// Center the label using Layout
var layout = new kendo.drawing.Layout(rect, {
justifyContent: "center"
});
layout.append(group);
layout.reflow();
// Render the content
visual.append(layout);
});
return visual;
}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
</script>