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
0
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!