Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 12 Sep 2023 15:17 by ADMIN
Bryon
Created on: 25 Feb 2020 16:12
Category: Charts
Type: Feature Request
15
Custom rendering for Chart Series Labels - Visual Template

It would be nice to make the label container less than the width of the element so that it stands out more.

I know that it can be set to different colors and transparent but adjusting the width would be a nice addition as well.

5 comments
ADMIN
Hristian Stefanov
Posted on: 12 Sep 2023 15:17

Hi Mark,

Thanks for your interest in the feature.

Sharing your insights is always appreciated.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Mark
Posted on: 08 Sep 2023 13:14
Now that OnAxisLabelClick is available on charts it would be especially useful to be able to specify elements with classes around label text to assign styles like `cursor: pointer`.
ADMIN
Hristian Stefanov
Posted on: 31 Aug 2023 08:23

Hi Mark,

Thank you for your effort in creating an example to illustrate a possible use-case.

It is always important for us to understand the common use cases that a particular feature would cover.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Mark
Posted on: 24 Aug 2023 11:04

As a possible use case for this feature. We find that our charts move and shift their layout a lot depending on the length of our axis label text and our desired rotation. It would be excellent if we could provide a template that would allow us to control the axis labels size explicitly. 

 

https://blazorrepl.telerik.com/mnEsPrFR015aV1Vj54

ADMIN
Marin Bratanov
Posted on: 26 Feb 2020 15:37

Hi Bryon,

I renamed this request to something that can be implemented - a visual template for the label that will let you define all aspects (such as colors, backgrounds, sizes and so on). Here's how this works in Kendo, for example: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.labels.visual (see the rect field) and the charting will in Blazor will have similar behavior.

The series label element width depends a lot on the type of series and thus it cannot be exposed as a configuration option as-is. Consider the following example for this - while in a Column series the label is as wide as the column, a bar or a line series cannot have the same behavior (in the bar chart the height of the label depends on the bar size):

 

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
            <ChartSeriesStack Enabled="true"></ChartSeriesStack>
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.Top" Visible="true" Font="Bold" Background="red">
                <ChartSeriesLabelsMargin Left="30" Right="30"></ChartSeriesLabelsMargin>
            </ChartSeriesLabels>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
            <ChartSeriesStack Enabled="true"></ChartSeriesStack>
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.Above" Visible="true" Font="bold 16px Times New Roman" Background="red"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public List<object> series3Data = new List<object>() { 15, 3, 8, 8 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category