Left-Align Bar Chart Category Axis Labels
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Product Version | 2019.1.220 |
Description
How can I align the category axis labels of the Kendo UI Bar Chart to the left?
Solution
Use the Kendo UI Drawing API to customize the appearance of the labels in the Bar Chart. You can adjust the following suggested approach to your preferences:
- Create a new function within the
categoryAxis.labels.visualconfiguration. - Initialize a new
kendo.drawing.Groupobject. - Set the appearance of the label with the
kendo.drawing.Textelement. - Configure the rectangle which will hold the text.
-
Use the
kendo.drawing.alignmethod to set the alignment within the rectangle. -
Append the elements together within the group, and return the results.
```javascript labels: { visual: function(e){ //1 var group = new kendo.drawing.Group(); //2 var text = new kendo.drawing.Text(e.value, e.rect.origin, { font: "Verdana; font-weight: bold;" }); //3 var rect = new kendo.geometry.Rect(e.rect.origin, [60, 20]); //4 kendo.drawing.align([text], rect, "start"); //5 group.append(new kendo.drawing.Rect(rect, { fill: null, stroke: null}), text); //6 return group; } }, }, ```
The following example demonstrates the full implementation of the suggested approach.
The following example demonstrates the full implementation of the suggested approach.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
type: "bar"
},
series: [{
data: [
20, 10, 5
],
}],
categoryAxis: {
labels: {
visual: function(e){
var group = new kendo.drawing.Group();
var text = new kendo.drawing.Text(e.value, e.rect.origin, { font: "Verdana; font-weight: bold;" });
var rect = new kendo.geometry.Rect(e.rect.origin, [60, 20]);
kendo.drawing.align([text], rect, "start");
group.append(new kendo.drawing.Rect(rect, { fill: null, stroke: null}), text);
return group;
}
},
categories: ["First", "Second", "Third"]
}
});
</script>