Set custom colors for the Chart series

Environment

Product	Chart
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.2.621 version

Description

How to set custom colors for each series of the Telerik UI for ASP.NET MVC Chart?

Solution

1. Store the colors values in an array.
2. By using the setOptions method, set the colors for the series.

<div class="demo-section k-content wide">
    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .Transitions(true)
        .SeriesDefaults(seriesDefaults => seriesDefaults
            .Column()
        )
        .Series(series =>
        {
            series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
            series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
            series.Column(new double[] { 68000, 40000, 45000, 22000, 11000, 6000 }).Name("Unique visitors");
        })
        .CategoryAxis(axis => axis
            .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}")
        )
    )
</div>
<div>
    @(Html.Kendo().ColorPicker()
        .Name("serieOne")
        .Buttons(false)
        .Preview(false)
        .Value("#ffffff")
        .Events(ev =>ev.Change("serieOne"))
    )
    @(Html.Kendo().ColorPicker()
        .Name("serieTwo")
        .Buttons(false)
        .Preview(false)
        .Value("#ffffff")
        .Events(ev => ev.Change("serieTwo"))
    )
    @(Html.Kendo().ColorPicker()
        .Name("serieThree")
        .TileSize(tile=>
        {
            tile.Height(19);
            tile.Width(34);
        })
        .Buttons(false)
        .Preview(false)
        .Value("#ffffff")
        .Events(ev => ev.Change("serieThree"))
    )
    @(Html.Kendo().Button()
        .Name("setColorBtn")
        .Content("Set colors")
        .Events(e=>e.Click("onClick"))
    )
</div>

    var seriesColors = []; //stores the colors from the color picker
    function isSeriesColorsExceeded(){ //asserts if more than 3 colors are pushed into the seriesColors variable
        if (seriesColors.length >= 3) {
            seriesColors = [];
        }
    }
    function serieOne(e) { //event handler for the first picker
        isSeriesColorsExceeded();
        seriesColors.push(e.value); //push the currently selected color into the global seriesColors variable
    }
    function serieTwo(e) { //event handler for the second picker
        isSeriesColorsExceeded();
        seriesColors.push(e.value);
    }
    function serieThree(e) {//event handler for the third picker
        isSeriesColorsExceeded();
        seriesColors.push(e.value);
    }
    function onClick() { //Set colors button
        var chart = $("#chart").data("kendoChart");
        chart.setOptions({ seriesColors: seriesColors }); //push the previously defined array with the color options
    }

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.