New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Setting Custom Colors for the Chart Series

Environment

ProductTelerik UI for ASP.NET Core Chart
Progress Telerik UI for ASP.NET Core versionCreated with the 2022.2.621 version

Description

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

Solution

  1. Store the colors values in an array.

  2. By using the setOptions method, set the colors for the series.

    Index.cshtml
    <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>

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

More ASP.NET Core Chart Resources

See Also