Customizing Bar Chart Category Axis Labels
Environment
| Product | Telerik UI for ASP.NET Core Chart |
| Progress Telerik UI for ASP.NET Core version | Created with the 2022.3.1109 version |
Description
How can I customize the Category Axis labels of the Telerik UI for ASP.NET Core Bar Chart?
Solution
Use the Kendo UI Drawing API to customize the appearance of the labels in the ASP.NET Core Bar Chart. You can adjust the suggested approach to your preferences through the following steps:
- Create a new function and pass its reference through the Visual() configuration method for the labels of the category axis.
- 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.
@(Html.Kendo().Chart()
.Name("chart")
.Title("Site Visitors Stats")
.Legend(legend => legend
.Visible(false)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.Series(series =>
{
series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Bar(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Labels(labels => labels.Visual("customLabels").Font("10px"))
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Max(140000)
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)
<script>
function customLabels(e) {
var group = new kendo.drawing.Group(); // Initialize a new kendo.drawing.Group object.
var text = new kendo.drawing.Text(e.value, e.rect.origin, { font: "Verdana; font-weight: bold;" }); // Set the appearance of the label with the kendo.drawing.Text element.
var rect = new kendo.geometry.Rect(e.rect.origin, [90, 80]); // Configure the rectangle which will hold the text.
kendo.drawing.align([text], rect, "start"); // Use the kendo.drawing.align method to set the alignment within the rectangle.
group.append(new kendo.drawing.Rect(rect, { fill: null, stroke: null }), text); // Append the elements together within the group.
return group; // Return the results.
}
</script>
For the complete implementation of the suggested approach, refer to the Telerik REPL example on customizing the category labels of the ASP.NET Core Bar Chart.