Set both marker/point color and it's background color.

[James]

Hello,

I'm able to set the color of the points on the chart (red and blue). I'm unable to get rid of the black-center of the points by setting the background color.

How do I set both color of points and background color (center of point) to same color?

Thanks.

js code:

----------

<script>
        function getPointColor(point)
        {
        if (point.dataItem.Name === "Left Eye Sensor")
        {
            return "#af3d3c";
        }
        else
        {
            return "#3f48cc";
        }
    }
</script>

@(Html.Kendo().Chart<KendoScatterChart.Models.ChartScatterPlotPoint>(Model)
            .Name("pressureDataChart")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
            )
            .ChartArea(chartArea => chartArea
                .Background("transparent")
            )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Scatter().Labels(labels => labels.Visible(true)).Markers(markers => markers.Size(8))
            )
            .DataSource(dataSource => dataSource
                .Group(group => group.Add(model => model.Name))
            )
            .Series(series =>
            {
                series.Scatter(model => model.X, model => model.Y).ColorHandler("getPointColor").Markers(markers => markers.Background("getPointColor"));
            })
            .XAxis(x => x
                .Date()
                .Title(title => title.Text("Date"))
            )
            .YAxis(y => y
                .Numeric()
                .Title(title => title.Text("Pressure [mmHg]"))
            )
            .Zoomable()
            .Pannable()
)

C# code:

------------

    public class ChartScatterPlotPoint
    {
        public DateTime X { get; set; }
        public double Y { get; set; }

        public string Name { get; set; }

        public string Color { get; set; }

        public ChartScatterPlotPoint(DateTime dateTime, double v, string name, string color)
        {
            this.X = dateTime;
            this.Y = v;
            this.Name = name;
            this.Color = color;
        }
    }

    public class TempModel : ModelBase
    {
        // For KendoUI plotting.
        public List<ChartScatterPlotPoint> DataPointList { get; set; }
        public List<string> DateList { get; set; }

        public string Name { get; set; }

        public TempModel()
        {

// for demo - color set by js-method.
            DataPointList = new List<ChartScatterPlotPoint>(){
                new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1, "Left Eye Sensor", "blue"),
                new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2, "Left Eye Sensor", "blue"),
                new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3, "Left Eye Sensor", "blue"),
                new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1.5, "Right Eye Sensor", "green"),
                new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2.5, "Right Eye Sensor", "green"),
                new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3.5, "Right Eye Sensor", "green")
            };
        }
    }

[Teya]

Hi James,

If you want to set the background color of the markers by using a function, you should use the BackgroundHandler method instead of the Background method (similar to the colorHandler that you have used for the color of the points). The Background method works in case you are setting the background as a string (e.g 'red', '#af3d3c', etc), but since you want to use a function, you should replace:

markers.Background("getPointColor")

with

markers.BackgroundHandler("getPointColor")

For a reference, you can check the Documentation for the MVC Chart Data Labels.

I hope this helps!


Regards,
Teya
Progress Telerik

[James]

Thanks Teya!

This worked to get the js-function called.

-jim