Please see here: http://jsbin.com/teveza/edit?html,output
Basically I'm trying to have two horisontal bars for comparison. I want them to have a categoryAxis title and have different colors. And I cannot get both.
So far the closest I can get is this:
{
seriesColors: ["red", "green"],
"seriesDefaults": {
"type": "bar"
},
series: [
{ data: [2,3] },
],
categoryAxis:{
categories:["Red Category","Green Category"],
lables:{
visible:true, }
}
}
So.... any pointers on how to do that will be appreciated
The series object has a property called colorField that can be used for this: http://docs.telerik.com/KENDO-UI/api/javascript/dataviz/ui/chart#configuration-series.colorField
You can use it in one of the following 2 ways:
Updated JSBIN
$("#chart1").kendoChart({
theme: "flat",
dataSource: {
data:[
{key: "Red Category", value: "2", usercolor: "red"},
{key: "Green Category", value: "3", usercolor: "green"},
]},
seriesDefaults: {
type: "bar",
},
series: [{
field: "value",
categoryField: "key",
colorField: "usercolor",
}],
});
$("#chart2").kendoChart({
theme: "flat",
seriesDefaults: {
type: "bar",
},
series: [{
field: "value",
colorField: "usercolor",
data: [
{value: "2", usercolor: "red"},
{value: "3", usercolor: "green"},
],
}],
categoryAxis:{
categories:["Red Category", "Green Category"],
}
});
来源:https://stackoverflow.com/questions/34269126/kendo-bar-chart-colors-of-categories