Completed
Last Updated: 22 May 2024 13:24 by ADMIN
Sylvain
Created on: 19 Nov 2019 08:41
Category: Charts
Type: Feature Request
60
Show / Hide series on legend click

Hi,

I would like to be able to show / hide a serie by clicking to a legend.

Is there a way to do it actually ?

10 comments
ADMIN
Tsvetomir
Posted on: 22 May 2024 13:24

Hello everyone,

Update on the item: I'm marking this item as "Completed" as the desired functionality can be achieved with the OnLegendItemClick event of the Chart. 

Here is a foundational REPL example that demonstrates the usage of the event.

Should there be any scenarios not fully addressed by the above approach, any feedback in the comments section would be greatly appreciated, allowing us to revise the item status.

Regards,
Tsvetomir
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!
ADMIN
Dimo
Posted on: 13 Jul 2023 05:38

Hello Michael,

Yes, this feature has gained enough popularity, so it is very likely that we will implement it. The exact timing and official confirmation will be reflected by the item's status.

Regards,
Dimo
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Michael
Posted on: 07 Jul 2023 08:47
Is there a chance this feature is coming anywhen? In my opinion this should really be standard.
Nicolai
Posted on: 04 May 2023 11:30
This feature should be standard, or atleast give us a onclick for the legend event so we can hide the series ourselves :/
ADMIN
Marin Bratanov
Posted on: 12 Mar 2022 18:47

Hi Adam,

The best way to know when something gets implemented is to click the Follow button. When the release is known, we will add that information.

Your Vote is already in, and that raises its popularity, and that is one of the metrics management uses for prioritizing tasks. There are many more factors, through, and at this point I cannot say when it will be implemented. Thus, the Follow button is the best way to know.

Regards,
Marin Bratanov
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/.

Adam
Posted on: 10 Mar 2022 06:46
This is a very common feature and is in most charting libraries. Given the number of votes is it possible to get this on the roadmap?
ADMIN
Nadezhda Tacheva
Posted on: 22 Sep 2021 12:12

Hello,

A possible workaround in the meantime would be to programmatically toggle the series visibility on click of the corresponding legend item. At this stage the Chart Legend does not expose click event for its items (we have another feature request for that - OnLegendItemClick event similar to the OnSeriesClick). That said, you can create a custom legend and handle the onclick event of its elements to show/hide the corresponding series. You can add the desired elements and styles to match your application needs.  You also need to hide the built-in legend to skip any possible confusion. You can do that by setting its visibility to "false".

The example below demonstrates the described approach.

<style>
    .custom-legend {
        cursor: pointer;
        text-align: center;
    }
</style>

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Visible="@Product1Visible" Type="ChartSeriesType.Line"
                     Name="Product 1" Data="@series1Data" Color="red">
        </ChartSeries>
        <ChartSeries Visible="@Product2Visible" Type="ChartSeriesType.Line"
                     Name="Product 2" Data="@series2Data" Color="blue">
        </ChartSeries>
    </ChartSeriesItems>

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

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

    <ChartLegend Visible="false" Position="ChartLegendPosition.Right" />

    <div class="custom-legend">
        <span @onclick="@(() => ClickProduct1())" style="color:red; opacity:@(Product1Visible? 1 : 0.5)">Product 1</span>
        <span>|</span>
        <span @onclick="@(() => ClickProduct2())" style="color:blue; opacity:@(Product2Visible? 1 : 0.5)">Product 2</span>
    </div>
</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 string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };

    public bool Product1Visible { get; set; } = true;
    public bool Product2Visible { get; set; } = true;

    void ClickProduct1()
    {
        Product1Visible = !Product1Visible;
    }

    void ClickProduct2()
    {
        Product2Visible = !Product2Visible;
    }
}

Regards,
Nadezhda Tacheva
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/.

ADMIN
Marin Bratanov
Posted on: 05 Dec 2020 06:07

Hello,

The best way to get status updates is to click the Follow button on this page. I've also added your Vote on your behalf to raise the priority of this item.

 

Regards,
Marin Bratanov
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/.

Datafyer
Posted on: 04 Dec 2020 05:50

Why unplanned? This feature is in almost all charting systems I have ever used.

Very helpful to users.

ADMIN
Marin Bratanov
Posted on: 19 Nov 2019 09:15

Hi Gilles,

This feature is not available yet in the charts. I moved this to the feedback portal where you can Follow it: https://feedback.telerik.com/blazor/1442813-show-hide-series-on-legend-click.

If it doesn't become available before click events become available, maybe they would let you do it (depending on what exactly gets implemented, it's too early to say right now): https://feedback.telerik.com/blazor/1412010-i-need-a-click-event-on-a-chart-element-such-as-a-specific-bar-in-a-bar-chart-or-a-slice-in-a-pie-chart.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor