Selecting alternate Series Color from theme

3 posts, 1 answers
  1. Tomo
    Tomo avatar
    2 posts
    Member since:
    Feb 2019

    Posted 25 Feb Link to this post

    • 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>
  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 27 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Tomo
    Tomo avatar
    2 posts
    Member since:
    Feb 2019

    Posted 27 Feb Link to this post

    Thanks Tsvetina!

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