This is a migrated thread and some comments may be shown as answers.

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

13 Answers 303 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Abdullah
Top achievements
Rank 1
Abdullah asked on 12 Feb 2013, 10:07 PM
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??

13 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 14 Feb 2013, 05:18 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Abdullah
Top achievements
Rank 1
answered on 14 Feb 2013, 05:36 PM
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?
0
Iliana Nikolova
Telerik team
answered on 18 Feb 2013, 12:02 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff
Top achievements
Rank 1
answered on 27 Jan 2014, 12:43 PM
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
0
Iliana Nikolova
Telerik team
answered on 28 Jan 2014, 04:19 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 04 Feb 2014, 10:20 AM
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.
0
Iliana Nikolova
Telerik team
answered on 05 Feb 2014, 09:34 AM
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

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

0
Ian
Top achievements
Rank 1
answered on 24 Mar 2014, 10:07 AM
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.
0
Iliana Nikolova
Telerik team
answered on 24 Mar 2014, 04:23 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
B SIVARAMA
Top achievements
Rank 1
answered on 27 May 2015, 04:58 AM
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?
0
Iliana Nikolova
Telerik team
answered on 28 May 2015, 03:08 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
B SIVARAMA
Top achievements
Rank 1
answered on 03 Jun 2015, 11:45 AM
is this option available for MVC charts?
0
Iliana Nikolova
Telerik team
answered on 05 Jun 2015, 06:47 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Abdullah
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Abdullah
Top achievements
Rank 1
Jeff
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Ian
Top achievements
Rank 1
B SIVARAMA
Top achievements
Rank 1
Share this question
or