Цвет линии нескольких серий

Способ получить несколько цветов на одной линии — применить градиент в качестве цвета обводки. Где-то в вашем HTML вы можете включить скрытый элемент svg с определенным градиентом, например:

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

ПРИМЕЧАНИЕ. Вы также можете просто создать определение градиента в скрипте и добавить его к диаграмме SVG.

Затем используйте обратный вызов рендеринга виджета диаграммы, чтобы применить градиент к линии:

$("#chart").kendoChart({
    series: [{
       name: "Grading",
       color: function(point){return point.value<60 ? "red" : "blue"; },
       width: 2,
       size: 2,
       tooltip: {
           visible: true,
       },
       data: [81, 95, 61, 55, 59, 5, 57, 59, 66, 65, 54, 70, 72.37]}
   ],
   seriesDefaults: {
       type: "line",
       missingValues: "interpolate"     
   },
   valueAxis: {
       max: 100
   },
   render: function(e) {
       $('#chart svg g [clip-path="url(#kdef2)"] path').css("stroke", "url(#theGrad)");        
   }
});

К сожалению, диаграмма кендо не применяет идентификаторы или классы к различным элементам svg, поэтому есть некоторые пробы и ошибки/поиск в инструментах разработчика браузера, чтобы найти подходящий селектор.

ДЕМО

Также для вашей реальной проблемы вам нужно будет рассчитать соответствующие остановки градиента на основе вашего фактического диапазона данных.

Да, это возможно, однако код, который вы разместили, не может работать:

function lineColor()
{
  for(i=0;i<data.length;i++){ 
   if{data[i]<60}
    color="red";
   else{color="blue";}
   }
}

Пытаться:

function lineColor(){
  for(i=0; i<data.length; i++){ 
    if(data[i]<60) {color="red";}
    else {color="blue";}
  }
}

В качестве альтернативы просто троичный:

function lineColor(){
  for(i=0; i<data.length; i++){ 
    color=data[i]<60) ? 'red' : 'blue';
  }
}

Я предполагаю, что в цепочке областей видимости есть какой-то идентификатор color.

Редактировать:

В официальной документации указано, что нужно установить series.color в функцию,
в вашем случае: color: function(point){return point.value<60 ? "red" : "blue"; }
Однако я понятия не имею, почему это не работает в вашем jsfiddle.