Change color of data points in line graph programatically

8 posts, 0 answers
  1. Zach
    Zach avatar
    11 posts
    Member since:
    Jul 2014

    Posted 16 Jun 2015 Link to this post

    Can someone help me figure out how to do this?  I need to change the color/shape of a datapoint based on a value in the datasource.  If a certain value for each datarow is empty, display one shape.  Otherwise, default to another shape.  

     Thanks!

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 17 Jun 2015 Link to this post

    Hello Zach,

    The modifying of the markers will be available with the Q2 2015 release, where a visual will be exposed for the markers, series, legend and titles.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Zach
    Zach avatar
    11 posts
    Member since:
    Jul 2014

    Posted 17 Jun 2015 in reply to Danail Vasilev Link to this post

    That's great news!  In the meantime, is there a way I can modify the text label above the data point instead?
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 18 Jun 2015 Link to this post

    Hello Zach,

    You can use templates for the labels - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/clienttemplates/defaultcs.aspx

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 10 Nov 2015 Link to this post

    I also need to color one point on LineSeries.

    Anything new on this one?

  7. Zach
    Zach avatar
    11 posts
    Member since:
    Jul 2014

    Posted 10 Nov 2015 in reply to David Link to this post

    I wasn't able to figure out a solution using color.  In the end, I used an asterisk in the label of the point instead of a color. 

     

    1.<telerik:LineSeries DataFieldY="dataValue" Name="line1">
    2.   <LabelsAppearance>
    3.      <ClientTemplate>#if (dataItem.CorrAct.trim()) {# *#=dataItem.dataValue#* #} else {# #=dataItem.dataValue# #} #</ClientTemplate>
    4.   </LabelsAppearance>
    5.</telerik:LineSeries>

  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 11 Nov 2015 Link to this post

    Hi Guys,

    You can try to use functions for markers colors:

    <script type="text/javascript">
        function pageLoad() {
            var kendoWidget = $find("myChartClientID").get_kendoWidget();
            function getColor(e) {
      
                if (e.value.y > 4) {
                    return "green";
                }
                else {
                    return "blue";
                }
            }
      
            kendoWidget.options.series[0].markers.background = getColor;
            kendoWidget.options.series[0].markers.border = { color: getColor };
            kendoWidget.redraw();
        }
    </script>


    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 11 Nov 2015 in reply to Danail Vasilev Link to this post

    Fantastic! Worked great for me!

    Thank you Danail

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017