Scatter Points with different color, symbol and size

4 posts, 0 answers
  1. Brian
    Brian avatar
    25 posts
    Member since:
    Apr 2008

    Posted 13 Jan 2014 Link to this post

    Hi,

    Based on values in the datarow I would like to change the style of the points in the same series.

    Could you provide sample code for this senario?

    Regards
    Brian
  2. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 14 Jan 2014 Link to this post

    Hello Brian,

    Thank you for writing.

    You can use the LabelFormatting event to style the points (the labels can be transparent if you do not want them). Also in order this event to fire the the data points should have their label property set. For example you can initialize and format the points like this:
    public Form1()
    {
        InitializeComponent();
     
        ScatterSeries scatterSeries = new ScatterSeries();
        scatterSeries.Name = "";
        scatterSeries.DataPoints.Add(new ScatterDataPoint(15, -19) { Label = "temp" });
        scatterSeries.DataPoints.Add(new ScatterDataPoint(18, -22) { Label = "temp" });
        scatterSeries.DataPoints.Add(new ScatterDataPoint(13, -15) { Label = "temp" });
        scatterSeries.DataPoints.Add(new ScatterDataPoint(10, -8) { Label = "temp" });
        scatterSeries.DataPoints.Add(new ScatterDataPoint(5, -12) { Label = "temp" });
        scatterSeries.PointSize = new SizeF(18, 18);
     
        ScatterSeries scatterSeries2 = new ScatterSeries();
        scatterSeries2.Name = "";
        scatterSeries2.DataPoints.Add(new ScatterDataPoint(20, -20) { Label = "temp" });
        scatterSeries2.DataPoints.Add(new ScatterDataPoint(15, -10) { Label = "temp" });
        scatterSeries2.DataPoints.Add(new ScatterDataPoint(7, -6) { Label = "temp" });
        scatterSeries2.DataPoints.Add(new ScatterDataPoint(18, -22) { Label = "temp" });
        scatterSeries2.DataPoints.Add(new ScatterDataPoint(10, -15) { Label = "temp" });
        scatterSeries2.PointSize = new SizeF(18, 18);
     
        scatterSeries.Shape = new RoundRectShape(0);
     
        radChartView1.Series.Add(scatterSeries);
        radChartView1.Series.Add(scatterSeries2);
         
        radChartView1.LabelFormatting += radChartView1_LabelFormatting;
     
        foreach (var item in radChartView1.Series)
        {
            item.ShowLabels = true;
        }
    }
     
    void radChartView1_LabelFormatting(object sender, ChartViewLabelFormattingEventArgs e)
    {
        e.LabelElement.ForeColor = Color.Transparent;
        e.LabelElement.BackColor = Color.Transparent;
        e.LabelElement.BorderWidth = 0;
     
        DataPointElement el = ((DataPointElement)e.LabelElement.Parent);
        ScatterDataPoint point = el.DataPoint as ScatterDataPoint;
     
        if (point.YValue > -15)
        {
            el.BackColor = Color.DarkBlue;
            el.PointSize = new SizeF(18, 18);
        }
        else
        {
            el.BackColor = Color.DarkRed;
            el.PointSize = new SizeF(25, 25);
        }
    }

    Please let me know if there is something else I can help you with. 

    Regards,
    Dimitar
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. Zohran
    Zohran avatar
    2 posts
    Member since:
    Sep 2018

    Posted 19 Nov 2018 Link to this post

    I want to change to color and shape of the items/points for scatter chart in Kendo React. Can anyone please help with this regard. How this can be done?
  4. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 19 Nov 2018 Link to this post

    Hello Zohran,

    This is the WinForms forum, please ask questions related to other products in the appropriate forum: KendoReact Forums - Telerik Community.

    Thank you for your understanding.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top