Unplanned
Last Updated: 22 Sep 2021 12:12 by ADMIN
Sylvain
Created on: 19 Nov 2019 08:41
Category: Charts
Type: Feature Request
24
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 ?

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