Last Updated: 22 Nov 2022 12:13 by ADMIN
Created on: 29 Oct 2021 09:11
Category: Charts
Type: Feature Request
Custom rendering for Chart Legend - Visual Template
I would like to customize the appearance of the Chart Legend
Posted on: 22 Nov 2022 12:13

Hi Sheena,

We are planning a bigger initiative (a.k.a. epic) related to multiple Chart enhancements in mid 2023. That's why the current statuses make it look like the Charts are undervalued.

We just added a few additional planned items for visibility.

On a side note, I assume that "roughly 60" came from the pager that shows 3 pages of feature requests. The actual item count was 43.


In the meantime, here is how to build a Chart legend manually outside the component. This will provide any customization capability.

<div style="display: flex; align-items: baseline">

    <TelerikChart Width="400px" Height="300px">
            <ChartSeries Type="ChartSeriesType.Pie" Data="@PieData"

        <ChartTitle Text="Revenue per product"></ChartTitle>

        <ChartLegend Visible="false" />

    <TelerikListView Data="@PieData" Width="240px">
            @{ var pieItem = (PieModel)context; }
            <div style="display: flex; gap: .4em;">
                <span style="flex: 0 1 auto; line-height: 1.2">
                    <span style="display: inline-block; vertical-align: middle; width: 20px; height: 4px; background-color: @pieItem.Color"></span>
                <span style="flex: 1 0 auto;">@pieItem.Name</span>
                <span style="flex: 1 0 auto; text-align: right">@pieItem.Value.ToString("C2")</span>


@code {
    public class PieModel
        public string Name { get; set; }
        public double Value { get; set; }
        public string Color { get; set; }

    public List<PieModel> PieData = new List<PieModel>
        new PieModel
            Name = "Product 1",
            Value = 123,
            Color = "#f66"
        new PieModel
            Name = "Product 2",
            Value = 456,
            Color = "#6f6"
        new PieModel
            Name = "Product 3",
            Value = 789,
            Color = "#66f"

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Posted on: 21 Nov 2022 16:44

Your chart components currently have 1 item in the Planned Stage and roughly 60 in the unplanned stage. 

That seems to indicate your support for Blazor UI charting is almost non-existent.


Posted on: 21 Oct 2022 07:38

Hello Sheena,

I understand that some features can be important for our customers and their lack may cause trouble. I am sorry if this is the case. We prioritize our development plans based on customer value and demand. This is the reason why some items may remain in the "Unplanned" state longer.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Posted on: 14 Oct 2022 18:26

It's been a year since this was first proposed - can we expect a solution at any point soon?


For reference - this is supported out of the box in most visualization platforms (matplotlib, pyplot, excel etc).


The fact that it is missing from your toolkit entirely seems more like a bug than a feature request.