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

2 posts, 0 answers
  1. Oliver
    Oliver avatar
    2 posts
    Member since:
    Oct 2012

    Posted 30 Aug Link to this post

    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}"
                }
            }

     

     

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    51 posts

    Posted 30 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top