Skip to main content

Series Colorizer

  • 11 minutes to read

The Series Colorizer uses predefined algorithms to assign colors to bound series.

Chart SeriesKeyColorColorizer (the Flow palette)

The image above shows a chart with the SeriesKeyColorColorizer applied (the Flow palette).

Add Colorizer at Design-Time

Run the Chart Designer from the WebChartControl Tasks list.

Chart Designer

Choose the Properties tab and expand the Series Template item. Select a colorizer from the drop-down list next to the SeriesColorizer property.

Chart Control - Series Colorizer

For information on colorizer settings, refer to the following section: Predefined Series Colorizers.

Add Colorizer in Code

Use the following code to add a colorizer in markup.

<dx:WebChartControl ID="WebChartControl1" runat="server">
    <SeriesTemplate>
        <SeriesColorizerSerializable>
            <dx:SeriesKeyColorColorizer>
                <KeysSerializable>
                    <dx:ObjectSerializable Type="System.String" Value="Europe" />
                    <dx:ObjectSerializable Type="System.String" Value="Americas" />
                    <dx:ObjectSerializable Type="System.String" Value="Africa" />
                </KeysSerializable>
            </dx:SeriesKeyColorColorizer>
        </SeriesColorizerSerializable>
    </SeriesTemplate>
</dx:WebChartControl>

To add a colorizer at runtime, assign a colorizer object to the SeriesTemplate.SeriesColorizer property.

WebChartControl1.SeriesDataMember = "Continent";
WebChartControl1.SeriesTemplate.ArgumentDataMember = "Year";
WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Population" });
WebChartControl1.SeriesTemplate.View = new LineSeriesView();
SeriesKeyColorColorizer colorizer = new SeriesKeyColorColorizer() {
    PaletteName = "Flow",
};
colorizer.Keys.AddRange(new object[] { "Europe", "Americas", "Africa" });
WebChartControl1.SeriesTemplate.SeriesColorizer = colorizer;

Predefined Series Colorizers

You can use one of the following predefined colorizers:

SeriesKeyColorColorizer

The SeriesKeyColorColorizer applies a different color (from a standard or a custom palette) to each series. To apply the colorizer to series, follow the steps below:

The following code applies the same color from the In A Fog palette to series with equal associated keys: “Europe”, “Americas”, or “Africa”.

<dx:WebChartControl ID="WebChartControl1" runat="server">
    <Legend Name="Default Legend"></Legend>
    <Titles>
        <dx:ChartTitle Text="Historic, current and future population "></dx:ChartTitle>
    </Titles>
</dx:WebChartControl>
using DevExpress.XtraCharts;
using System;
using System.Data;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Init(object sender, EventArgs e) {
        WebChartControl1.DataSource = GetData();
        WebChartControl1.DataBind();
        WebChartControl1.SeriesDataMember = "Continent";
        WebChartControl1.SeriesTemplate.ArgumentDataMember = "Year";
        WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Population" });
        WebChartControl1.SeriesTemplate.View = new LineSeriesView();
        SeriesKeyColorColorizer colorizer = new SeriesKeyColorColorizer() {
            PaletteName = "In A Fog",
        };
        colorizer.Keys.AddRange(new object[] { "Europe", "Americas", "Africa" });
        WebChartControl1.SeriesTemplate.SeriesColorizer = colorizer;
    }
    internal static DataTable GetData() {
        DataTable table = new DataTable();
        table.Columns.AddRange(new DataColumn[] { new DataColumn("Continent", typeof(string)), 
                                                  new DataColumn("Year", typeof(int)), 
                                                  new DataColumn("Population", typeof(Int32)) });
        table.Rows.Add("Europe", 1980, 694);
        table.Rows.Add("Europe", 1990, 721);
        table.Rows.Add("Europe", 2000, 730);
        table.Rows.Add("Europe", 2010, 728);
        table.Rows.Add("Europe", 2020, 721);
        table.Rows.Add("Europe", 2030, 704);

        table.Rows.Add("Americas", 1980, 641);
        table.Rows.Add("Americas", 1990, 721);
        table.Rows.Add("Americas", 2000, 836);
        table.Rows.Add("Americas", 2010, 935);
        table.Rows.Add("Americas", 2020, 1027);
        table.Rows.Add("Americas", 2030, 1110);

        table.Rows.Add("Africa", 1980, 471);
        table.Rows.Add("Africa", 1990, 623);
        table.Rows.Add("Africa", 2000, 797);
        table.Rows.Add("Africa", 2010, 982);
        table.Rows.Add("Africa", 2020, 1189);
        table.Rows.Add("Africa", 2030, 1416);
        return table;
    }
}

Result:

Chart SeriesKeyColorColorizer (the In A Fog palette)

Note

When the SeriesKeyColorColorizer.Keys collection is empty, the colorizer fills this collection with unique SeriesDataMember values.

You can use custom logic to assign color keys to series. Create a custom key provider that inherits the IColorizerKeyProvider interface and implement the GetKey(Object) method for this purpose. Assign an instance of this provider to the SeriesKeyColorColorizer.KeyProvider property as follows:

<dx:WebChartControl ID="WebChartControl1" runat="server">
    <Legend Name="Default Legend"></Legend>
</dx:WebChartControl>
using DevExpress.XtraCharts;
using System;
using System.Collections.Generic;
using System.Data;
using System.Drawing;

public partial class _Default : System.Web.UI.Page {
   protected void Page_Init(object sender, EventArgs e) {
       WebChartControl1.DataSource = GetData();
       WebChartControl1.DataBind();
       WebChartControl1.SeriesDataMember = "Region";
       WebChartControl1.SeriesTemplate.ArgumentDataMember = "Year";
       WebChartControl1.SeriesTemplate.View = new LineSeriesView();
       WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Sales" });
       WebChartControl1.SeriesTemplate.ArgumentScaleType = ScaleType.Qualitative;
       WebChartControl1.SeriesTemplate.ValueScaleType = ScaleType.Numerical;
       SeriesKeyColorColorizer colorizer = new SeriesKeyColorColorizer() {
           PaletteName = "Slipstream",
           // Assign a provider instance to the KeyProvider property.
           KeyProvider = new CustomKeyProvider(),
       };
       colorizer.Keys.AddRange(new object[] { "key1", "key2", "key3" });
       WebChartControl1.SeriesTemplate.SeriesColorizer = colorizer;
   }
   internal static DataTable GetData() {
       DataTable table = new DataTable();
       table.Columns.AddRange(new DataColumn[] { new DataColumn("Region", typeof(string)), 
                                                 new DataColumn("Year", typeof(int)), 
                                                 new DataColumn("Sales", typeof(decimal)) });
       table.Rows.Add("Asia", 2017, 4.2372D);
       table.Rows.Add("Asia", 2018, 4.7685D);
       table.Rows.Add("Asia", 2019, 5.2890D);
       table.Rows.Add("Australia", 2017, 1.7871D);
       table.Rows.Add("Australia", 2018, 1.9576D);
       table.Rows.Add("Australia", 2019, 2.2727D);
       table.Rows.Add("Europe", 2017, 3.0884D);
       table.Rows.Add("Europe", 2018, 3.3579D);
       table.Rows.Add("Europe", 2019, 3.7257D);
       table.Rows.Add("North America", 2017, 3.4855D);
       table.Rows.Add("North America", 2018, 3.7477D);
       table.Rows.Add("North America", 2019, 4.1825D);
       table.Rows.Add("South America", 2017, 1.6027D);
       table.Rows.Add("South America", 2018, 1.8237D);
       table.Rows.Add("South America", 2019, 2.1172D);

       return table;
   }
}
//Implement a custom key provider class. 
internal class CustomKeyProvider : IColorizerKeyProvider {
   public object GetKey(object colorKey) {
       string seriesName = colorKey.ToString();
       if (seriesName.StartsWith("A"))
           return "key1";
       if (seriesName.Contains("America")) {
           return "key2";
       }
       else
           return "key3";
   }
}

Result:

Chart SeriesKeyColorColorizer Custom Key Provider

SeriesDataSourceColorizer

SeriesDataSourceColorizer gets colors from a data source and uses them to paint series. The data source should contain values with one of the following types:

  • an integer ARGB color value;
  • a string color name;
  • a Color object.

The example below customizes the colorizer.

<dx:WebChartControl ID="WebChartControl1" runat="server">
    <Legend Name="Default Legend"></Legend>
    <Titles>
        <dx:ChartTitle Text="Historic, current and future population "></dx:ChartTitle>
    </Titles>
</dx:WebChartControl>
using DevExpress.XtraCharts;
using System;
using System.Collections.Generic;
using System.Data;
using System.Drawing;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Init(object sender, EventArgs e) {
        WebChartControl1.DataSource = GetData(); 
        WebChartControl1.DataBind();
        WebChartControl1.SeriesDataMember = "Continent";
        WebChartControl1.SeriesTemplate.ArgumentDataMember = "Year";
        WebChartControl1.SeriesTemplate.View = new LineSeriesView();
        WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Population" });

        WebChartControl1.SeriesTemplate.SeriesColorizer = new SeriesDataSourceColorizer() {
            DataSource = new List<Continent> {
                new Continent { Name = "Europe", Marker = Color.FromArgb(0xE1, 0x83, 0x35) },
                new Continent { Name = "Americas", Marker = Color.FromArgb(0x1E, 0x91, 0xD6) },
                new Continent { Name = "Africa", Marker = Color.FromArgb(0x8F, 0xC9, 0x3A) }
            },
            SeriesKeyMember = "Name",
            SeriesColorMember = "Marker"
        };
    }
    internal static DataTable GetData() {
        DataTable table = new DataTable();
        table.Columns.AddRange(new DataColumn[] { new DataColumn("Continent", typeof(string)), 
                                                  new DataColumn("Year", typeof(int)), 
                                                  new DataColumn("Population", typeof(Int32)) });
        table.Rows.Add("Europe", 1980, 694);
        table.Rows.Add("Europe", 1990, 721);
        table.Rows.Add("Europe", 2000, 730);
        table.Rows.Add("Europe", 2010, 728);
        table.Rows.Add("Europe", 2020, 721);
        table.Rows.Add("Europe", 2030, 704);

        table.Rows.Add("Americas", 1980, 641);
        table.Rows.Add("Americas", 1990, 721);
        table.Rows.Add("Americas", 2000, 836);
        table.Rows.Add("Americas", 2010, 935);
        table.Rows.Add("Americas", 2020, 1027);
        table.Rows.Add("Americas", 2030, 1110);

        table.Rows.Add("Africa", 1980, 471);
        table.Rows.Add("Africa", 1990, 623);
        table.Rows.Add("Africa", 2000, 797);
        table.Rows.Add("Africa", 2010, 982);
        table.Rows.Add("Africa", 2020, 1189);
        table.Rows.Add("Africa", 2030, 1416);
        return table;
    }
}

class Continent {
    public String Name { get; set; }
    public Color Marker { get; set; }
}

The example uses the following API members:

Property Description
SeriesDataSourceColorizer.DataSource The data source with color items.
SeriesDataSourceColorizer.SeriesKeyMember The name of the data source field that contains colors.
SeriesDataSourceColorizer.SeriesColorMember The name of the data source field that contains series identifiers.

Result:

Chart SeriesKeyColorColorizer (the In A Fog palette)

Custom Series Colorizer

To create a custom series colorizer, the colorizer should inherit the abstract SeriesColorizerBase class. Override the SeriesColorizerBase.GetSeriesColor method and implement your custom logic to return a color that corresponds to the series key (the series data member value).

The following example uses the Colors dictionary to store series colors that are specified in code. If a series color is not set, the colorizer gets the color from the default palette.

<dx:WebChartControl ID="WebChartControl1" runat="server">
    <Legend Name="Default Legend"></Legend>
    <Titles>
        <dx:ChartTitle Text="Historic, current and future population "></dx:ChartTitle>
    </Titles>
</dx:WebChartControl>
using DevExpress.XtraCharts;
using System;
using System.Collections.Generic;
using System.Data;
using System.Drawing;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Init(object sender, EventArgs e) {
        WebChartControl1.DataSource = GetData();
        WebChartControl1.DataBind();
        WebChartControl1.SeriesDataMember = "Continent";
        WebChartControl1.SeriesTemplate.ArgumentDataMember = "Year";
        WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Population" });
        WebChartControl1.SeriesTemplate.View = new LineSeriesView();

        CustomSeriesColorizer customSeriesColorizer = new CustomSeriesColorizer();
        customSeriesColorizer.Colors["Europe"] = Color.Red;
        customSeriesColorizer.Colors["Americas"] = Color.Green;
        WebChartControl1.SeriesTemplate.SeriesColorizer = customSeriesColorizer;
    }
    internal static DataTable GetData() {
        DataTable table = new DataTable();
        table.Columns.AddRange(new DataColumn[] { new DataColumn("Continent", typeof(string)),
                                                  new DataColumn("Year", typeof(int)),
                                                  new DataColumn("Population", typeof(Int32)) });
        table.Rows.Add("Europe", 1990, 721);
        table.Rows.Add("Europe", 2000, 730);
        table.Rows.Add("Europe", 2010, 728);
        table.Rows.Add("Europe", 2020, 721);
        table.Rows.Add("Europe", 2030, 704);

        table.Rows.Add("Americas", 1990, 721);
        table.Rows.Add("Americas", 2000, 836);
        table.Rows.Add("Americas", 2010, 935);
        table.Rows.Add("Americas", 2020, 1027);
        table.Rows.Add("Americas", 2030, 1110);

        table.Rows.Add("Africa", 1990, 623);
        table.Rows.Add("Africa", 2000, 797);
        table.Rows.Add("Africa", 2010, 982);
        table.Rows.Add("Africa", 2020, 1189);
        table.Rows.Add("Africa", 2030, 1416);

        return table;
    }
    class CustomSeriesColorizer : SeriesColorizerBase {
        List<object> metColors = new List<object>();
        public readonly Dictionary<string, Color> Colors = new Dictionary<string, Color>();
        public override Color GetSeriesColor(object seriesKey, Palette palette) {
            Color color;
            if (Colors.TryGetValue(seriesKey.ToString(), out color)) {
                return color;
            }
            else {
                int keyIndex;
                if (metColors.Contains(seriesKey)) {
                    keyIndex = metColors.IndexOf(seriesKey);
                }
                else {
                    keyIndex = metColors.Count;
                    metColors.Add(seriesKey);
                }
                return palette[keyIndex % palette.Count].Color;
            }
        }
        protected override ChartElement CreateObjectForClone() {
            return new CustomSeriesColorizer();
        }
    }
}

Result:

Custom Series Colorizer

See Also