Series Colors with grouped datasource

[Burak]

Hi,

My problem is getting colored series line in line chart and the colors should come from grouped datasource,
My json looks like this:

{"Color":"#CC0000","Id":1,"Legend":"Şube","Value":46,"XAxis":"Mart"},
{"Color":"#EC6E00","Id":13,"Legend":"Bölge Müdürlüğü","Value":42,"XAxis":"Haziran"},
{"Color":"#7F7F7F","Id":29,"Legend":"Genel Müdürlük","Value":20,"XAxis":"Temmuz"}.....

And my script is:

function createChart() {
var chartDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function () {
return "http://bipoc:7777/Service.svc/GetBarChart";
},
dataType: "json"
}
},

group: {
field: "Legend",
}
});

$("#chart").kendoChart({
dataSource: chartDataSource,
series: [{
type: "line"
, field: "Value"
, name: "#= group.value # "
, colorField: "Color"
, groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}

}],
legend: {
position: "bottom"
},
valueAxis: {
labels: {
format: "${0}",
skip: 2,
step: 2
}
},
categoryAxis: {
field: "XAxis",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}

But by this way i get colored lines but boxes of the legends and tooltips retain the same with default colors (I've attached a screenshot of the result). What is wrong in my code? ANy help would be appreciated.
Thanks,

[Iliana Dyankova]

Hi Burak,

The illustrated outcome is expected and is due to the following:
- By design colorField is intended to set color to a single point in the series, not to the entire series;
- Legend items colors match the series colors.

Hence in order to achieve the expected result I can suggest two approaches: 
- Set series colors via the series.color or seriesColors option (like in this online demo);
- Set series colors manually through the chart.options: 

$("#chart").kendoChart({
  //....
  dataBound: onDB
});

function onDB(){
  var chart = $("#chart").data("kendoChart");
  chart.options.series[0].color = chart.options.series[0].data[0].Color;
  //....
}

Regards,
Iliana Nikolova
Telerik