Change CSS Angular Kendo Chart - Set style which the line is of value 0

Question

I would like to change the CSS style of the grid line in which the value is zero.

How can I do?

My chart:

I would like to create a chart like this:

Answer 1

The easiest thing would be to change the Marker color based on value of the point. You can set the color/background/border color property of the series markers to a function instead of a string and return desired color:

$("#chart").kendoChart({
  series: [ {
    type: "line",
    color: "#82D225",
    markers: {
      visible: true,      
      border: {
        color: function(point){return point.value<=0 ? "red" : "#82D225"; }
      }
    },
    data: [3300, 3200, 0, -300, -100, 200],    
  }]
});

Here is a DEMO

Changing the color of the line as opposed to the markers is more complicated. You can apply a gradient to the line with color for above 0 and color for below 0.

Define an SVG gradient anywhere on the page:

<div style="height: 0px;">
  <svg>
    <defs>      
      <linearGradient id="theGrad" x1="0" x2="0" y1="0" y2="1">
        <stop stop-color="#82D225" offset="0%"></stop>
        <stop id="stop1" stop-color="#82D225" offset="40%"></stop>
        <stop id="stop2" stop-color="red" offset="40%"></stop>
        <stop stop-color="red" offset="100%"></stop>
      </linearGradient>
    </defs>
  </svg>
</div>  

Then in script find min and max of your dataset and update the gradient stop offsets:

  var data = [3300, 3200, 0, -300, -100, 200];      
  var max = Math.max(...data);
  var min = Math.min(...data);
  var color = "url(#theGrad)";
  
  var NeedGradient = max > 0 && min <= 0;
  if (NeedGradient){
    var range = max - min;
    var stop = (max - 0) * 100 / range;
    stop = Math.round(stop);
    $("#stop1, #stop2").attr("offset", stop + "%");
  } else {
    max <=0 ? color = "red" : color  = "#82D225";
  }

Finally, on chart render, apply the gradient to the line:

$("#chart").kendoChart({
  series: [ {
    type: "line",
    color: function(point){return point.value<=0 ? "red" : "#82D225"; },
    data: data,    
  }],
  render: function(e) {
    $('#chart svg g [clip-path="url(#kdef2)"] path').css("stroke", color);
  }
});

Here is another DEMO