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

Change color of data points in line graph programatically

7 Answers 93 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Zach
Top achievements
Rank 1
Zach asked on 16 Jun 2015, 08:18 PM

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!

7 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 17 Jun 2015, 07:14 AM
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
0
Zach
Top achievements
Rank 1
answered on 17 Jun 2015, 01:59 PM
That's great news!  In the meantime, is there a way I can modify the text label above the data point instead?
0
Danail Vasilev
Telerik team
answered on 18 Jun 2015, 08:30 AM
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
0
David
Top achievements
Rank 1
Veteran
answered on 10 Nov 2015, 07:44 PM

I also need to color one point on LineSeries.

Anything new on this one?

0
Zach
Top achievements
Rank 1
answered on 10 Nov 2015, 09:48 PM

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>

0
Danail Vasilev
Telerik team
answered on 11 Nov 2015, 08:06 AM
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
0
David
Top achievements
Rank 1
Veteran
answered on 11 Nov 2015, 03:06 PM

Fantastic! Worked great for me!

Thank you Danail

Tags
Chart (HTML5)
Asked by
Zach
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Zach
Top achievements
Rank 1
David
Top achievements
Rank 1
Veteran
Share this question
or