Changing properties of a specific/single line chart marker at runtime

[Abdullah]

Hello,

I want to change the properties for specific marker(s) on a line chart based on data I have, e.g. the color of a marker or the tooltip for the specific marker.
Is there any way to do that??

[Iliana Dyankova]

Hello Abdullah,

I am afraid Kendo UI Chart does not support dynamic changes of its configuration options and in order to achieve this you should refresh() the chart. For example the following snippet can be used to change the marker's color: 

var chart = $("#chart").data("kendoChart");
var getMarker = chart.options.series[0].markers;
getMarker.background = "blue";
chart.refresh();

Regards,

Iliana Nikolova
the Telerik team

[Abdullah]

Hello Iliana,

refreshing the chart is no problem, I actually want to change the background for one marker on the series rather than all the markers on it. Is that possible?

[Iliana Dyankova]

Hello Abdullah,

I am afraid changing the background color of a particular marker is not supported in Kendo UI Line Chart and there is no suitable workaround I can suggest. Please accept my apologies for the inconvenience caused.
 
Regards,
Iliana Nikolova
the Telerik team

[Jeff]

Is it still the case that you cannot change the colour of a specific/single line chart marker at runtime? Wondering if this Feb 2013 this option is now available

[Iliana Dyankova]

Hi Jeff,

I am glad to inform you that we have implemented a series.colorField option which can be used to set a specific colour to a particular point. An online example is available for the bar charts, however the same approach is applicable for the line charts.

Regards,
Iliana Nikolova
Telerik

[Mark]

Thanks Iliana for the information. However while the online example, that using "Column", selects the colors correctly, switching the series to use "Line" does not and only uses a single color (the original issue).

The following works as suggested:
series.Column(model => model.Score, model => model.Color)
                .Labels(labels => labels.Format("{0}")
                .Visible(true)
                );

However, the following does not:
series.Line(model => model.Score, model => model.Color)
                .Labels(labels => labels.Format("{0}")
                .Visible(true)
                );

Is there anything else that needs to be configures for this to work.

Your assistance is appreciated.

[Iliana Dyankova]

Hello Mark,

Thank you for pointed our attention to this issue - it appears it is not possible to set different colors to the markers of Kendo UI Line Chart for ASP.NET MVC. I forwarded the issue to our developers and we will do our best to provide a fix as soon as possible. Please excuse us for the inconvenience caused.

Regards,
Iliana Nikolova
Telerik

[Ian]

Can this be extended to work with scatter lines?

I have a series of data that can come from 3 different places to be charted together as a single and need to show a different color marker depending on the source or validity of the data in the point.

[Iliana Dyankova]

Hi Ian,

I already posted a reply to the same question in your other thread, however I am pasting my answer here too:

In order to set different background to the markers you could use custom logic into themarkers.background function. As an example: 

$("#chart").kendoChart({
  //....
  seriesDefaults: {
    markers: {
      background:function(e){
        if(e.dataItem.userColor == "Red"){
            return "red"
        }
        else{
            return "blue"
        }
      }
    }
  }
});

Regards,
Iliana Nikolova
Telerik

 

 

[B SIVARAMA]

Is there any update on this feature yet ?(set different colors to Kendo UI Line Chart for ASP.NET MVC ) Is it in the road map?

[Iliana Dyankova]

Hi B SIVARAMA,

Yes, this issue has been already addressed - you could use the markers BackgroundHandler:

@(Html.Kendo().Chart(Model)
  //....
  .Series(series => { series
      .Line( model => model.Value )
      .Markers(m=>m.BackgroundHandler("markersBackground"));
  })
)

<script>
function markersBackground(e) {
   if(e.value > 5){
     return "red"
   }
   else{
     return "blue"
   }
}
</script>

 

Regards,
Iliana Nikolova
Telerik

 

 

[B SIVARAMA]

is this option available for MVC charts?

[Iliana Dyankova]

Hi B SIVARAMA,

Yes, the provided code snippet in my previous reply is due to Kendo UI Chart for ASP.NET MVC. 

Regards,
Iliana Nikolova
Telerik