ScatterSeries Point Formatting

3 posts, 0 answers
  1. Melissa
    Melissa avatar
    2 posts
    Member since:
    Sep 2018

    Posted 01 Nov 2018 Link to this post

    I was wondering if it’s possible to get more advanced formatting such as hollow (doughnut) points with an outline color (figure 1) or even more advanced formatting like using gradient and bevel properties in Excel (figure 2).
  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3469 posts

    Posted 01 Nov 2018 Link to this post

    Hello, Melissa, 

    It is possible to assign a specific shape for the ScatterSeries, e.g. DonutShape. Thus, you will obtain donuts data points. In addition, you can iterate the ScatterPointElements and customize the color and gradient style. You can find below a sample code snippet: 

    ScatterSeries scatterSeries = new ScatterSeries();
    scatterSeries.Name = "";
    scatterSeries.DataPoints.Add(new ScatterDataPoint(15, 19));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(18, 10));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(13, 15));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(10, 8));
    scatterSeries.DataPoints.Add(new ScatterDataPoint(5, 12));
    scatterSeries.PointSize = new SizeF(15,15);
    this.radChartView1.Series.Add(scatterSeries);
     
    ScatterSeries scatterSeries2 = new ScatterSeries();
    scatterSeries2.Name = "";
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(20, 20));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(15, 10));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(7, 6));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(18, 22));
    scatterSeries2.DataPoints.Add(new ScatterDataPoint(10, 10));
    scatterSeries2.PointSize = new SizeF(6, 6);
    scatterSeries2.Shape = new DonutShape();
    this.radChartView1.Series.Add(scatterSeries2);
     
    foreach (ScatterPointElement pe in scatterSeries.Children)
    {
        pe.GradientStyle = GradientStyles.Radial;
        pe.BackColor = Color.Red;
        pe.BackColor2 = Color.Yellow;
    }



    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Melissa
    Melissa avatar
    2 posts
    Member since:
    Sep 2018

    Posted 01 Nov 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Perfect, thanks Dess.
Back to Top