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:

1. Create a new function and pass its reference through the Visual() configuration method for the labels of the category axis.
2. Initialize a new kendo.drawing.Group object.
3. Set the appearance of the label with the kendo.drawing.Text element.
4. Configure the rectangle which will hold the text.
5. Use the kendo.drawing.align method to set the alignment within the rectangle.
6. Append the elements together within the group, and return the results.

Index.cshtml

    @(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.js

    <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.

More ASP.NET Core Chart Resources

• ASP.NET Core Chart Documentation

• ASP.NET Core Chart Demos

• ASP.NET Core Chart Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Customize the Category Labels of the Bar Chart
• Client-Side API Reference of the Chart for ASP.NET Core
• Server-Side API Reference of the Chart for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base