Show Series Label in the Top Left Corner of the Kendo UI Column Chart
Environment
Product Version | 2020.1.219 |
Product | Progress® Kendo UI® Chart for jQuery |
Description
How can I show the Series Label in the top left corner of the Kendo UI Column Chart?
Solution
In order to show the Series Labels in the top left corner of the Kendo UI Column Chart Series, use the series.labels.visual function:
$("#chart").kendoChart({
series: [{
color: "#190663",
labels: {
visible: true,
position: "center",
visual: left,
template: "Value: #: value #"
},
data: [1, 2]
}]
});
function left(e) {
var layout = new kendo.drawing.Layout(e.rect, {
orientation: "vertical"
});
var text1 = new kendo.drawing.Text(e.text, [e.rect.origin.x, e.rect.origin.y], {
fill: {
color: "#fff"
}});
layout.append(text1);
layout.reflow();
return layout;
}
Make sure to set the series.labels.position.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
color: "#190663",
labels: {
visible: true,
position: "center",
visual: left,
template: "Value: #: value #"
},
data: [1, 2]
}]
});
function left(e) {
var layout = new kendo.drawing.Layout(e.rect, {
orientation: "vertical"
});
var text1 = new kendo.drawing.Text(e.text, [e.rect.origin.x, e.rect.origin.y], {
fill: {
color: "#fff"
}});
layout.append(text1);
layout.reflow();
return layout;
}
</script>