Bubble Chart OnSeriesClick

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 05 Aug 2021 15:03 by ADMIN

Bill Wolff

Created on: 29 Jul 2021 20:23

Category: Charts

Type: Feature Request

Bubble Chart OnSeriesClick

I tried to add the OnSeriesClick to the chart definition and it allows this. When I click a bubble item, args is empty. Should this be supported? The user wants a bubble click to navigate to another page?

1 comment

ADMIN

Nadezhda Tacheva

Posted on: 05 Aug 2021 15:03

Hi Bill,

Generally speaking, the OnSeriesClick event is supported by the Bubble Chart.

An important point to take into consideration when working with numerical charts (like Bubble, Scatter and Scatter Line) is that they represent two numerical values for the X and Y axes and they do not use categories on the x-axis.

That being said, if in the OnSeriesClick handler you are trying to use "Category" or "CategoryIndex" fields of the ChartSeriesClickEventArgs, you will get null values for them since the Bubble Chart does not actually have categories.

To achieve your desired scenario, you can try the following - in the OnSeriesClick handler get the "DataItem" field of the ChartSeriesClickEventArgs and cast it to your model. Then you can use one of its fields to check what item was clicked and then navigate to the corresponding page.

The example below demonstrates how to get the "Country" field of the clicked chart item. It is displayed in a logger string on top of the chart. You may use it as a reference when configuring the Bubble Chart in your application.

<div>
    Clicked from: @logger
</div>

<TelerikChart OnSeriesClick="@OnSeriesClickHandler">

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bubble"
                     Data="@Series1Data"
                     Name="North America"
                     XField="@nameof(ModelData.LifeExpectancy)"
                     YField="@nameof(ModelData.FertilityRate)"
                     SizeField="@nameof(ModelData.PopulationChange)">
            <ChartSeriesLabels Visible="true" Template="@labelTemplate"></ChartSeriesLabels>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Bubble"
                     Data="@Series2Data"
                     Name="Europe"
                     XField="@nameof(ModelData.LifeExpectancy)"
                     YField="@nameof(ModelData.FertilityRate)"
                     SizeField="@nameof(ModelData.PopulationChange)">
            <ChartSeriesLabels Visible="true" Template="@labelTemplate"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartXAxes>
        <ChartXAxis>
            <ChartXAxisTitle Text="Life Expectancy (years)"></ChartXAxisTitle>
        </ChartXAxis>
    </ChartXAxes>

    <ChartYAxes>
        <ChartYAxis>
            <ChartYAxisTitle Text="Fertility Rate (children per family)"></ChartYAxisTitle>
        </ChartYAxis>
    </ChartYAxes>

    <ChartTitle Text="Life expectancy, fertility rate and projected population change" />

</TelerikChart>

@code {

    void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
    {
        var item = args.DataItem as ModelData;
        
        logger = item.Country;
    }

    string logger = String.Empty;

    string labelTemplate = "#=dataItem.Country#";

    public class ModelData
    {
        public double LifeExpectancy { get; set; }
        public double FertilityRate { get; set; }
        public int PopulationChange { get; set; }
        public string Country { get; set; }
    }

    public List<ModelData> Series1Data = new List<ModelData>()
{
        new ModelData() { LifeExpectancy = 80.66, FertilityRate = 1.27, PopulationChange = 500000, Country = "Canada" },
        new ModelData() { LifeExpectancy = 78.09, FertilityRate = 2.3, PopulationChange = 7600000, Country = "USA" }
    };

    public List<ModelData> Series2Data = new List<ModelData>()
{
        new ModelData() { LifeExpectancy = 67.3, FertilityRate = 1.54, PopulationChange = 25000, Country = "Denmark" },
        new ModelData() { LifeExpectancy = 74.3, FertilityRate = 1.85, PopulationChange = 3000000, Country = "Great Britain" }
    };
}

I hope you will find the above information and example useful. Having in mind foregoing, I will now mark this request as "Completed", since the scenario can be achieved with the current setup of the Bubble Chart.

If you run across any further concerns, please let us know. We will be happy to step in and assist.

Regards,
Nadezhda Tacheva
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.