Scatter Chart - Set Color of data-point-color in legend.

[James]

Hello,

I'm working with scatter plot.

I'm able to set the color of the series of data points plotted and fill them in.

How do I get the data-point-color in the bottom legend to match the color of the data-points?

Or more simply, how do I set the color of the data-point-color in the x-axis legend?

The cshtml code:

    <div class="demo-section k-content wide">
        @(Html.Kendo().Chart<Injectsense.Models.ChartScatterPlotPoint>(Model.DataPointList)
          .Name("pressureDataChart")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom))
          )
          .ChartArea(chartArea => chartArea
              .Background("transparent")
          )
          .SeriesDefaults(seriesDefaults =>
              seriesDefaults.Scatter().Labels(labels => labels.Visible(false)).Markers(markers => markers.Size(6))
          )
          .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
            .Title(title => title.Text("Date"))
            .Date()
        )
        .YAxis(y => y
            .Numeric()
            .Title(title => title.Text("Pressure [mmHg]"))
        )
        .Zoomable()
        .Pannable()
        )
    </div>

The data point:

    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 value, string name, string color)
        {
            this.X = dateTime;
            this.Y = value;
            this.Name = name;
            this.Color = color;
        }
    }

The image is attached showing the area of concern.

Thank you for your help on this.

-jim

 

[Tsvetomir]

Hi James,

Thank you for the provided code snippet.

Unfortunately, setting the colours via the colorHandler will not affect the legend automatically. You can set the legend colour in the DataBound event handler as follows:

.Events(ev=>ev.DataBound("onDb"))

function onDb(){
  var chart = $("#chart").data("kendoChart");
  chart.options.series[0].color = chart.options.series[0].data[0].color;
  //....
}

You can read more about it in the following forum thread:

https://www.telerik.com/forums/chart-series-colors-based-on-datasource-groups#G6OzeaumE06tzeu8hF95XA

Let me know in case any questions arise.


Kind regards,
Tsvetomir
Progress Telerik

[James]

Tsvetomir,

Per your guidance I was able to get it to work.

Here's the JS-method I went with.

    function onDb() {
        var chart = $("#pressureDataChart").data("kendoChart");
        if (chart.options.series[0].data[0].Name === "Left Eye Sensor") {
            chart.options.series[0].color = "#3f48cc";
            chart.options.series[1].color = "#af3d3c";
        }
        else
        {
            chart.options.series[0].color = "#af3d3c";
            chart.options.series[1].color = "#3f48cc";
        }
    }

The "else" does not get executed but in case things change it's there.

It works!

Thank you.

-jim