Change color of data points in line graph programatically

[Zach]

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!

[Danail Vasilev]

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

[Zach]

That's great news!  In the meantime, is there a way I can modify the text label above the data point instead?

[Danail Vasilev]

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

[David]

I also need to color one point on LineSeries.

Anything new on this one?

[Zach]

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>

[Danail Vasilev]

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

[David]

Fantastic! Worked great for me!

Thank you Danail