Get index of series item when clicked

1 Answer 48 Views
Ajax Chart (HTML5) Chart (Obsolete)
John
Top achievements
Rank 1
John asked on 30 Oct 2024, 10:25 PM

How can I get the index of the series item on a Line Chart when clicking on it?

I am using OnSeriesClick

        function OnSeriesClick(args) {
            alert(args.value);
        }

I don't care about the value of the item, what I need is the index of it in the series.

Thanks,

 


1 Answer, 1 is accepted

Sort by
0
Vasko
Telerik team
answered on 31 Oct 2024, 07:44 AM

Hello Josh,

You can use  the category of the clicked item to get the index  you want:  

<telerik:RadHtmlChart runat="server" ID="ColumnChart" Width="800" Height="500" Transitions="true" Skin="Silk">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Wooden Table" Stacked="false" Gap="1.5" Spacing="0.4">
                <LabelsAppearance DataFormatString="{0} sales" Position="OutsideEnd"></LabelsAppearance>
                <TooltipsAppearance DataFormatString="{0} sales" Color="White"></TooltipsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="25000"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
                    <telerik:CategorySeriesItem Y="39000"></telerik:CategorySeriesItem>
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis AxisCrossingValue="0" Color="black">
            <Items>
                <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                <telerik:AxisItem LabelText="3"></telerik:AxisItem>
            </Items>
            <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" Skip="0" Step="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters" />
        </XAxis>
        <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside" MinorTickType="None" Reversed="false">
            <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" Skip="0" Step="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Sales" />
        </YAxis>
    </PlotArea>
    <ClientEvents OnSeriesClick="onSeriesClick" />
</telerik:RadHtmlChart>
    function onSeriesClick(e) {
        let itemIndex = e.category;
        console.log(`Clicked Item ${itemIndex}`);
    }
    

    Try this and see if it will be of use to your scenario.

    Regards,
    Vasko
    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
    Tags
    Ajax Chart (HTML5) Chart (Obsolete)
    Asked by
    John
    Top achievements
    Rank 1
    Answers by
    Vasko
    Telerik team
    Share this question
    or