Series Colorizer
- 11 minutes to read
The Series Colorizer uses predefined algorithms to assign colors to bound series.
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.
Choose the Properties tab and expand the Series Template item. Select a colorizer from the drop-down list next to the SeriesColorizer property.
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:
Add SeriesDataMember field values to the SeriesKeyColorColorizer.Keys collection.
Use the SeriesKeyColorColorizer.PaletteName property to specify the palette name. The following help topic lists all available standard palettes: Palettes.
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:
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:
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:
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: