Customizing Bar Chart Category Axis Labels

Environment

Product	Telerik UI for ASP.NET MVC Chart
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.3.1109 version

Description

How can I customize the Category Axis labels of the Telerik UI for ASP.NET MVC Bar Chart?

Solution

Use the Kendo UI Drawing API to customize the appearance of the labels in the ASP.NET MVC 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 MVC Bar Chart.

More ASP.NET MVC Chart Resources

• ASP.NET MVC Chart Documentation

• ASP.NET MVC Chart Demos

• ASP.NET MVC Chart Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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