Setting Custom Colors for the Chart Series

Environment

Product	Telerik UI for ASP.NET Core Chart
Progress Telerik UI for ASP.NET Core version	Created 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.

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

More ASP.NET Core Chart Resources

• ASP.NET Core Chart Documentation

• ASP.NET Core Chart Demos

• ASP.NET Core Chart Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL Example: Setting Custom Colors for the Chart Series
• Client-Side API Reference of the Chart for ASP.NET Core
• Server-Side API Reference of the Chart for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base