Scatter Points with different color, symbol and size

[Brian]

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

[Dimitar]

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

[Zohran]

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?

[Dimitar]

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