Coloring individual kendo bars

Question

I am trying to create a horizontal bar graph where each bar has a different color. I have tried entering the following as my series data:

Attempt 1. This displayed all my bars fine, but the color for each graph was always the same (the first color in the seriesColors array):

series: [value1, value2, value3, ...],
seriesColors: [hex1, hex2, hex3, ...]
categoryAxis: [name1, name2, name3, ...],

Attempt 2. This got all the colors correct, and the data appearing was fine, the problem was that each bar was super skinny in order to accommodate the room needed for the other bars with value "0":

series: [{
    type: "bar",
    data: [value1, 0, 0, 0, 0, 0],
    color: "#hex1"
},{
    type: "bar",
    data: [0, value2, 0, 0, 0, 0],
    color: "#hex2"
}...etc...],
categoryAxis: [name1, name2, name3, ...];

Attempt 3. This one was just plain broken.

    series: [{
    type: "bar",
    data: value1,
    color: "#hex1"
},{
    type: "bar",
    data: value1,
    color: "#hex2"
}...etc...],
categoryAxis: [name1, name2, name3, ...];

Attempt 4: This one displays the bars with the correct size and correct color, but there are no category names (as expected) on the category axis:

series: [{
    name: name1,
    data: value1,
    color: hex1
},
{
    name: name2,
    data: value2,
    color: hex2
}...etc...];

Answer 1

Consider specifying a value for the colorField property for each data item. For example:

$("#chart").kendoChart({
  series: [{
    colorField: "valueColor",
    data: [
      { value: 1, valueColor: "blue" },
      { value: 2, valueColor: "green" },
      { value: 3, valueColor: "#BADA55" },
      { value: 3, valueColor: "rgba(125, 125, 125, 0.2)" }
    ]
  }],
  seriesDefaults: {
    type: "bar"
  }
});