New to Telerik UI for ASP.NET Core? Download free 30-day trial

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

More ASP.NET Core Chart Resources

See Also

In this article