WinForms, WPF and ASP.NET Charting – Segment Colorizer (v19.1)

Up to and including v18.2, our charting component supported two series appearance customization methods:

• A Series Point Colorizer can set custom colors for series point elements, including bars and markers
• A Series Colorizer is used to configure colors for automatically generated series

In v19.1 we extend our appearance customization engine with new Segment Colorizer types. Colorizing segments means that a single series can use multiple colors to distinguish its segments. This feature makes it unnecessary to break the data model into partial collections and define separate series in order to use distinctive colors.

We supply three colorizer types that use different strategies to recognize segments and assign colors.

• With the RangeSegmentColorizer, value ranges are defined explicitly. Using the associated palette, colors are picked depending on those ranges, with intermediate color values calculated automatically.
• The TrendSegmentColorizer assigns segment colors depending on the values of the previous and current points.
• The PointBasedSegmentColorizer assigns segment colors to match either of the points next to a segment.

Setting things up is easy: you configure a colorizer object, either at design time or from code, and assign it to the property SeriesView.SegmentColorizer. Below are some examples using the WinForms Chart Control.

Note: For the WPF Chart Control, the SegmentColorizer property is available on the Series object (e.g. LineSeries2D.SegmentColorizer). The colorizer API is similar to that for the WinForms control. The Segment Colorizer is also supported by the XRChart control in an XtraReport and by the WebChartControl for ASP.NET.

Range Segment Colorizer

This code snippet configures a RangeSegmentColorizer using its RangeStops and Palette properties. The colorizer is then assigned to a Line Series View.

var colorizer = new RangeSegmentColorizer();
colorizer.RangeStops.AddRange(new double[] {
  -40, -35, -30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30 });
colorizer.Palette = new Palette("TemperaturePalette",
  new PaletteEntry[] {
    new PaletteEntry(Color.DarkBlue),
    new PaletteEntry(Color.SteelBlue),
    new PaletteEntry(Color.LightBlue),
    new PaletteEntry(Color.Yellow),
    new PaletteEntry(Color.OrangeRed)
  }
);

// Alternatively, use PaletteName to specify a standard palette.
// colorizer.PaletteName = Palettes.Slipstream.DisplayName;

colorizer.ShowInLegend = true;
colorizer.LegendItemPattern = "{V1:F0}°C — {V2:F0}°C";

// Now assign the colorizer to the series view
var lineSeriesView = chartControl.Series[0].View as LineSeriesView;
lineSeriesView.SegmentColorizer = colorizer;

Trend Segment Colorizer

The TrendSegmentColorizer changes the Series color when a point value increases or decreases in comparison with the previous value. Use the properties TrendSegmentColorizer.RisingTrendColor and TrendSegmentColorizer.FallingTrendColor to specify colors for rising and falling value segments.

var colorizer = new TrendSegmentColorizer();
colorizer.FallingTrendColor = Color.RoyalBlue;
colorizer.RisingTrendColor = Color.Firebrick;
colorizer.FallingTrendLegendText = "Temperature Decrease";
colorizer.RisingTrendLegendText = "Temperature Rise";
colorizer.ShowInLegend = true;
var lineSeriesView = chartControl.Series[0].View as LineSeriesView;
lineSeriesView.SegmentColorizer = colorizer;

Point Based Segment Colorizer

The PointBasedSegmentColorizer uses Series Point marker colors to paint line or area segments. Series Point markers can be colored using the simple SeriesPoint.Color property, or any Series Point Colorizer.

var lineSeriesView = chartControl.Series[0].View as LineSeriesView;
lineSeriesView.MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;

// Specify a colorizer to paint the series markers
var rangeColorizer = new RangeColorizer();
rangeColorizer.Palette = new Palette("TemperaturePalette",
  new PaletteEntry[] {
    new PaletteEntry(Color.DarkBlue),
    new PaletteEntry(Color.SteelBlue),
    new PaletteEntry(Color.LightBlue),
    new PaletteEntry(Color.Yellow),
    new PaletteEntry(Color.OrangeRed)
  }
);

rangeColorizer.LegendItemPattern = "{V1: F0}°C — {V2: F0}°C";
rangeColorizer.RangeStops.AddRange(
  new double[] { -40, -35, -30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30 });
chartControl.Series[0].Colorizer = rangeColorizer;

// The point based segment colorizer reuses the marker colors
var segmentColorizer = new PointBasedSegmentColorizer();
segmentColorizer.Direction = ColorDistributionDirection.Forward;
lineSeriesView.SegmentColorizer = segmentColorizer;

Compatibility

As mentioned above, the Segment Colorizer features are supported on WinForms, WPF and ASP.NET platforms, including charts used in Reporting.

Here is a list of the Series View types that support segment colorization:

• Line
• Spline
• Step Line
• Scatter Line
• Stacked Line
• Full-Stacked Line
• Area
• Spline Area
• Step Area
• Stacked Area
• Stacked Spline Area
• Stacked Step Area
• Full-Stacked Area
• Full-Stacked Spline Area
• Full-Stacked Step Area

Please Tell Us What You Think

We have previously published samples that replicated some of the new functionality. We believe that our implementation supersedes the approaches used by these samples:

• How to change the series line color when the value is under a predefined level (E462)
• How to colorize lines in the WPF ChartControl

Please let us know if you find any issues. We would also appreciate it if you could submit your response to this short survey:

Free DevExpress Products - Get Your Copy Today