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

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

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

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

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

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