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

14 posts, 0 answers
  1. Abdullah
    Abdullah avatar
    3 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    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??
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Feb 2013 Link to this post

    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!
  3. Abdullah
    Abdullah avatar
    3 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    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?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Feb 2013 Link to this post

    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!
  5. Jeff
    Jeff avatar
    1 posts
    Member since:
    Jan 2012

    Posted 27 Jan 2014 Link to this post

    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
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Jan 2014 Link to this post

    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!
  7. Mark
    Mark avatar
    1 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 Link to this post

    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.
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Feb 2014 Link to this post

    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).

  9. Ian
    Ian avatar
    1 posts
    Member since:
    Mar 2014

    Posted 24 Mar 2014 in reply to Iliana Nikolova Link to this post

    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.
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Mar 2014 Link to this post

    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.

     
  11. B SIVARAMA
    B SIVARAMA avatar
    2 posts
    Member since:
    Jun 2013

    Posted 26 May 2015 Link to this post

    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?
  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 May 2015 Link to this post

    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!
     
  13. B SIVARAMA
    B SIVARAMA avatar
    2 posts
    Member since:
    Jun 2013

    Posted 03 Jun 2015 in reply to Iliana Nikolova Link to this post

    is this option available for MVC charts?
  14. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Jun 2015 Link to this post

    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!
     
Back to Top