Selecting alternate Series Color from theme

[Tomo]

• Context:
  I am currently building a dashboard which will display multiple separate line graphs. I am using the Sass ThemeBuilder, and this is where the colors will be set (Under Chart > Series A-F) and regularly changed. The colors for these lines must match the colors of our SASS theme so they cannot be hard coded. 
  
  

• Problem:
  Currently every chart is drawn using the colors for Series A, which makes sense since there is only a single series per chart. What I would like to do is have each chart use a different series color.

Is there a way to do this without directly passing a hard coded hex value?

Currently I am achieving this by adding a few empty series inside each chart, but would like to know if there is a tidy way of doing it.

01.<div class="col-xs-6">
02.    @(Html.Kendo().Chart().Theme("sass")
03.          .Name("lines1")
04.          .Title("g1")
05.          .Series(s =>
06.          {
07.              s.Line(new List<double>());
08.              s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g1");
09.          })
10.          .HtmlAttributes(new { style = "height:200px;" })
11.          )
12.</div>
13.<div class="col-xs-6">
14.    @(Html.Kendo().Chart().Theme("sass")
15.          .Name("lines2")
16.          .Title("g2")
17.          .Series(s =>
18.          {
19.              s.Line(new List<double>());
20.              s.Line(new List<double>());
21.              s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g2");
22.          })
23.          .HtmlAttributes(new { style = "height:200px;" })
24.          )
25.</div>
26.<div class="col-xs-6">
27.    @(Html.Kendo().Chart().Theme("sass")
28.          .Name("lines3")
29.          .Title("g3")
30.          .Series(s =>
31.          {
32.              s.Line(new List<double>());
33.              s.Line(new List<double>());
34.              s.Line(new List<double>());
35.              s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g3");
36.          })
37.          .HtmlAttributes(new {style = "height:200px;"})
38.          )
39.</div>
40.<div class="col-xs-6">
41.    @(Html.Kendo().Chart().Theme("sass")
42.          .Name("lines4")
43.          .Title("g4")
44.          .Series(s =>
45.          {
46.              s.Line(new List<double>());
47.              s.Line(new List<double>());
48.              s.Line(new List<double>());
49.              s.Line(new List<double>());
50.              s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g4");
51.          } )
52.          .HtmlAttributes(new { style = "height:200px;" })
53.          )
54.</div>

[Tsvetina]

Hello Tomo,

You could use the series ColorHandler setting to call a function and pass it an index, so the theme color at the given index can be returned to the series. Here is a runnable example (if you copy the entire snippet into a view, you will be able to run it):

@(Html.Kendo().Chart()
        .Name("chart")
        .Series(series =>
        {
            series.Area(new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }).Name("India").ColorHandler("getColor(0)");
        })
        .CategoryAxis(axis => axis
            .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
            .MajorGridLines(lines => lines.Visible(false))
        )
)

@(Html.Kendo().Chart()
        .Name("chart2")
        .Series(series =>
        {

            series.Area(new double[] { -0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590 }).Name("Haiti").ColorHandler("getColor(1)");
        })
        .CategoryAxis(axis => axis
            .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
            .MajorGridLines(lines => lines.Visible(false))
        )
)

@(Html.Kendo().Chart()
        .Name("chart3")
        .Series(series =>
        {

            series.Area(new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }).Name("World").ColorHandler("getColor(2)");
        })
        .CategoryAxis(axis => axis
            .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
            .MajorGridLines(lines => lines.Visible(false))
        )
)

<script>
    function getColor(index) {
        var seriesColors = kendo.dataviz.autoTheme().chart.seriesColors;
        return seriesColors[index];
    }
</script>

Regards,
Tsvetina
Progress Telerik

[Tomo]

Thanks Tsvetina!

That worked perfectly and is a much better solution than my phantom series' :)