ScatterLine Char - How to make Dynamic the color of the line

[Oliver]

Hi have one question. 

I want to change the color of the line(between points) depending on the values on the Y-axis. If the line is below 0 then the line is red color, otherwise the line is  green color

 

 <div kendo-chart
     k-options="chartOptions"
     k-data-source="pctSource"
     style="height: 300px;">
</div>

 $scope.chartOptions = {
            legend: { visible: false },
            seriesDefaults: { type: 'scatterLine' },
            series: [{ xField: "time", yField: "percent", colorField: "userColor", color: "#4572A7" }],
            highlight: {
                border: {
                    opacity: 1,
                    width: 5,
                    color: "black"
                }
            },
            xAxis: {
                max: 120,
                labels: { format: "{0} min" },
                title: { text: "" },
                majorGridLines: {
                    visible: false
                }
            },
            yAxis: {
                max: $scope.pctCharAxisYMaxValue,
                min: $scope.pctCharAxisYMinValue,

                labels: { format: "{0}%" },
                title: { text: "" }
            },
            tooltip: {
                visible: true,
                template: "${dataItem.toolTipLabel}<br/>${dataItem.percent}"
            }
        }

 

 

[Eduardo Serra]

Hello Oliver,

A line from the same series cannot have two different colors, but a line made of two different series can. To end up with the look you're looking for, work with your data before sending it to the chart and separate it in two series, those with a Y value greater than 0 and those with a Y value smaller than 0.

I prepared a sample in the Kendo UI Dojo to show you how it can be done; take a look at it here.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress