How to get series name from clicking Bar Element Label

4 posts, 1 answers
  1. Kyle
    Kyle avatar
    8 posts
    Member since:
    Dec 2017

    Posted 08 Dec 2017 Link to this post

    I have a bar chart and I'm trying to get the name of the series when I click on the Label Element next to the bar.

    However, I can't find any documentation on how to add a click event to the label element (in the image attached, I'm talking about the $10000 label).

    I have a SelectedPointChanged event registered to my RadChartView control and that works great, but only works when the bar is clicked not the label next to it.

    private void selectionController_SelectedPointChanged(object sender, ChartViewSelectedPointChangedEventArgs args)
    {
     var series = args.NewSelectedSeries;
    }

     

     

     

     

  2.
  3. Kyle
    Kyle avatar
    8 posts
    Member since:
    Dec 2017

    Posted 08 Dec 2017 in reply to Kyle Link to this post

    Also, in my example image above I would expect the series name to be "Test".
  5. Answer
    Hristo
    Admin
    Hristo avatar
    1323 posts

    Posted 11 Dec 2017 Link to this post

    Hello Kyle,

    Thank you for writing.

    RadChartView does not provide means for directly attaching a click event to the label elements. You can achieve your task by handling the MouseClick event of the control and after checking for the mouse and the labels locations: 
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        public RadForm1()
        {
            InitializeComponent();
     
            BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
            barSeries.Name = "Series1";
            barSeries.LegendTitle = "Series1";
            barSeries.ShowLabels = true;
            barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
            this.radChartView1.Series.Add(barSeries);
     
            BarSeries barSeries2 = new BarSeries("Performance", "RepresentativeName");
            barSeries2.Name = "Series2";
            barSeries2.LegendTitle = "Series2";
            barSeries2.ShowLabels = true;
            barSeries2.DataPoints.Add(new CategoricalDataPoint(141, "White"));
            this.radChartView1.Series.Add(barSeries2);
     
            this.radChartView1.ShowLegend = true;
            this.radChartView1.MouseClick += RadChartView1_MouseClick;
        }
         
        private void RadChartView1_MouseClick(object sender, MouseEventArgs e)
        {
            foreach (ChartSeries series in this.radChartView1.Series)
            {
                foreach (BarPointElement pointElement in series.Children)
                {
                    BarLabelElement labelElement = pointElement.Children[0] as BarLabelElement;
                    Rectangle rect = CartesianRenderer.ToRectangle(labelElement.GetLayoutSlot());
                    rect.Offset(this.radChartView1.ChartElement.View.Margin.Left, this.radChartView1.ChartElement.View.Margin.Top);
                    if (rect.Contains(this.radChartView1.ChartElement.Wrapper.PointFromControl(e.Location)))
                    {  
                        RadMessageBox.Show(series.Name);
                    }
                }
            }
        }
    }

    I am also attaching a short video showing the result on my end.

    I hope this helps. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Kyle
    Kyle avatar
    8 posts
    Member since:
    Dec 2017

    Posted 11 Dec 2017 in reply to Hristo Link to this post

    Perfect, thank you!
  8.
Back to Top