Setting Custom Colors for the Chart Series

Environment

Product	Telerik UI for ASP.NET MVC 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.

More ASP.NET MVC Chart Resources

• ASP.NET MVC Chart Documentation

• ASP.NET MVC Chart Demos

• ASP.NET MVC Chart Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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