Question

I’m using the Telerik Kendo Pie Chart and I want to be able to color the wedges.

The following is the mark up for my Kendo UI pie chart:

<script type="text/javascript">
function createChart() {
    jQuery("#chart").kendoChart({
        theme: jQuery(document).data("kendoSkin") || "Metro",
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            labels: {
                visible: true,
                format: "{0}%"
            }
        },

        series: [{
            type: "pie",
            data: [{
                category: "Remaining Work",
                value: 75,
                explode: true
            }, {
                category: "CIOs",
                value: 2
            }, {
                category: "Other Executives",
                value: 10
            }, {
                category: "Directors and Physicians",
                value: 13
            }]
        }],
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

jQuery(document).ready(function () {
    setTimeout(function () {
        createChart();

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
    }, 400);

    jQuery(document).bind("kendo:skinChange", function (e) {
        createChart();
    });
});
 </script>

I’d like the remaining work to be light gray. How do I accomplish this?

Any suggestions would be appreciated.

Answer 1

In Kendo UI DataViz, all charts support overriding the theme colours via the seriesColors option. This property will take an array of hexadecimal colour strings. For example:

$("#chart").kendoChart({
   ...
   seriesColors: ["#7c7c7c", ... ]
});