Changing the color of a ScatterLine point in Javascript.

[Ahmet]

Hello

I'd like to be able to change the color of a ScatterSeriesItem point upon clicking. I have tried the following in Javascript; However, it didn't work. I'd appreciate for the help.

 

function seriesClick(e) {

  // change the color of the point to red

   e.point.color = "#ff0000"; 

  // redraw the chart

  var chart = $find("chart").get_kendoWidget();
  chart.redraw();

}

 

In C#, I am able to change a point's color by ScatterSeriesItem.BackgroundColor property, however I need to be able to do it in Javascript.

Thanks.

 

[Eyup]

Hi Ahmet,

You can use the e.element instance to achieve this requirement:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/seriesclick#seriesClick

Here is a working sample:

function pageLoad(app, args) {
    var chart = $find('<%= ScatterChart.ClientID %>');
    var kendoChart = chart.get_kendoWidget();
    chart.get_kendoWidget().bind("seriesClick", function (e) {
        $(e.element).attr("fill", "#ff0000");
    });
}

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Ahmet]

Hey Eyup

We aren't using Jquery so is there is any way to get the "attr" function from e.element with pure javascript ? 

I tried to use e.element.attributes("fill, ""#ff0000") but attributes wasn't a function.

I also tried to use e.element.attributes.fill.value = "#ff0000"; but it didn't work either.

Thanks.

[Eyup]

Hello Ahmet,

You can use the following approach for vanilla JS:

e.element.setAttribute("fill", "#ff0000");

Please give it a try and let me know if it works for you.

Regards,
Eyup
Progress Telerik