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:

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 ChartControl.

Note: For the WPF ChartControl, 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;

Range Segment 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;

Trend Segment 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;

Point Based Segment Colorizer

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:

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

4 comment(s)
Jonatas Hudler

Waiting this feature to debut in the Dashboard platform :)

23 April, 2019
Steve Sharkey

So cool (or hot depending on the data). Beginning to regret allowing my subscription to lapse...

23 April, 2019
Consafe Logistics AB

Great!

Is this also available from the dashboard designer?

25 April, 2019
Andrey (DevExpress)

@Jonatas Hudler

@Consafe Logistics AB

Thank you for your interest in an adopting this feature into our Dashboard product.

We understand the importance of condition-based coloring in Charts. That is why we decided to research this area in v19.2, as we promised it in our Roadmap.

community.devexpress.com/.../devexpress-dashboard-2019-roadmap.aspx

However, I should warn you that colorization task can be quite complex, and the results may be not delivered in v19.2 release.

29 April, 2019

Please login or register to post comments.