Unplanned
Last Updated: 12 Mar 2022 18:47 by ADMIN
Sylvain
Created on: 19 Nov 2019 08:41
Category: Charts
Type: Feature Request
33
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 ?

6 comments
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