series.color String|Function

The series base color. The supported values are:

  • CSS color string, including hex and rgb
  • function(point) - user-defined function that will be evaluated for each point. Returning undefined will assume the default series color.

Example - set the chart series color as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: "#a0b0c0"
  }]
});
</script>

Example - set the chart series color as a RGB value

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: "rgb(128, 0, 255)"
  }]
});
</script>

Example - set the chart series color by name

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: "red"
  }]
});
</script>

Example - set the chart series color as a function

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: function(point) {
      if (point.value > 1) {
        return "red";
      }

      // use the default series theme color
    }
  }]
});
</script>
In this article