Edit this page

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 color as a string

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2012-03-01 00:00"),
            price: 111
        }, {
            date: new Date("2012-03-02 00:00"),
            price: 121
        }, {
            date: new Date("2012-03-05 00:00"),
            price: 105
        }]
    },
    dateField: "date",
    series: [{
        type: "column",
        field: "price",
        color: "#ff0000"
    }]
});
</script>

Example set color as a function

<div id="chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2012-03-01 00:00"),
            price: 111
        }, {
            date: new Date("2012-03-02 00:00"),
            price: 121
        }, {
            date: new Date("2012-03-05 00:00"),
            price: 95
        }]
    },
    dateField: "date",
    series: [{
        type: "column",
        field: "price",
        color: function(point) {
            if (point.value < 100) {
                // Colorize matching points
                return "#f00";
            }

            // Use default theme color
        }
    }]
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy