Segment Colorizers

  • 4 minutes to read

Segment Colorizers allow you to paint segments of the LineSeries2D, AreaSeries and their descendants.

Overview

Segment colorizers only paint segments that form a line or area. Use the Series Point Colorizers to paint point markers.

You can use the Segment Colorizers with the following series:

Perform the following steps to apply a segment colorizer to a series:

Trend Segment Colorizer

The Trend Segment colorizer changes a line/area's color when a point value increases or decreases. You can specify the colors used to paint increasing and decreasing value segments.

Trend Segment Colorizer

The following code shows how to configure and apply the Trend Segment colorizer:

<dxc:ChartControl>
    <!--...-->
    <dxc:XYDiagram2D>
        <!--...-->
        <dxc:LineSeries2D  DisplayName="Temperature" 
                           DataSource="{Binding}" 
                           ArgumentDataMember="Date" 
                           ValueDataMember="Temperature">
            <dxc:LineSeries2D.SegmentColorizer>
                <dxc:TrendSegmentColorizer RisingTrendColor="Firebrick" 
                                           FallingTrendColor="RoyalBlue"
                                           RisingTrendLegendText = "Temperature Rise"
                                           FallingTrendLegendText = "Temperature Decrease"
                                           ShowInLegend="True"/>
            </dxc:LineSeries2D.SegmentColorizer>
        </dxc:LineSeries2D>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

The following table lists the related API members:

Member Description
TrendSegmentColorizer The colorizer that changes a line/area's color when a point value increases or decreases.
TrendSegmentColorizer.FallingTrendColor Gets or sets the color used to draw the falling value segments.
TrendSegmentColorizer.RisingTrendColor Gets or sets the color used to draw the rising value segments.
TrendSegmentColorizer.FallingTrendLegendText Gets or sets the text the legend uses to identify the falling trend segments.
TrendSegmentColorizer.RisingTrendLegendText Gets or sets the text the legend uses to identify the rising trend segments.
SegmentSeries2DBase.SegmentColorizer Gets or sets the colorizer that colors the line/area segments.

Range Segment Colorizer

The Range Segment colorizer allows you to paint line/area segments based on their value range.

The following code shows how to configure and apply the Range Segment colorizer:

<dxc:ChartControl>
    <!-- The title settings are skipped. -->
    <dxc:ChartControl.Legends>
        <dxc:Legend HorizontalPosition="RightOutside" 
                    VerticalPosition="Top" 
                    ReverseItems="True"/>
    </dxc:ChartControl.Legends>
    <dxc:XYDiagram2D>
        <!-- The axis settings are skipped. -->
        <dxc:LineSeries2D  DisplayName="Temperature" 
                           DataSource="{Binding}" 
                           ArgumentDataMember="Date" 
                           ValueDataMember="Temperature">
            <dxc:LineSeries2D.SegmentColorizer>
                <dxc:RangeSegmentColorizer RangeStops="-40 -30 -20 -15 -10 -5 0 5 10 15 20 30" 
                                           LegendTextPattern="{}{V1:F0}°C — {V2:F0}°C"
                                           ShowInLegend="True">
                    <dxc:RangeSegmentColorizer.Palette>
                        <dxc:CustomPalette>
                            <dxc:CustomPalette.Colors>
                                <Color>DarkBlue</Color>
                                <Color>SteelBlue</Color>
                                <Color>LightBlue</Color>
                                <Color>Yellow</Color>
                                <Color>OrangeRed</Color>
                            </dxc:CustomPalette.Colors>
                        </dxc:CustomPalette>    
                    </dxc:RangeSegmentColorizer.Palette>         
                </dxc:RangeSegmentColorizer>
            </dxc:LineSeries2D.SegmentColorizer>
        </dxc:LineSeries2D>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

The following table lists the related API members:

Member Description
RangeSegmentColorizer The colorizer that allows you to paint a line/area segment based on a its value range.
RangeSegmentColorizer.RangeStops Provides access to the collection of double values that define color range boundaries.
RangeSegmentColorizer.Palette Gets or sets the palette that provides colors for the colorizer.
RangeSegmentColorizer.LegendItemPattern Gets or sets the pattern to format the text that the legend shows for a color range.
RangeSegmentColorizer.ShowInLegend Gets or sets the value whether to show the colorizer items in the legend.
SegmentSeries2DBase.SegmentColorizer Gets or sets the colorizer that colors the line/area segments.

Point Based Segment Colorizer

The Point Based Segment Colorizer paints line/area segments into the point marker colors. Use a series point colorizer or specify the SeriesPoint.Brush property directly to provide markers with colors.

Point Based Segment Colorizer

The following code shows how to configure and apply the Point Based Segment colorizer:

<dxc:ChartControl x:Name="chartControl">
    <!--...-->
    <dxc:XYDiagram2D>
        <!--...-->
        <dxc:LineSeries2D  DisplayName="Temperature" 
                           DataSource="{Binding}" 
                           ArgumentDataMember="Date" 
                           ValueDataMember="Temperature" 
                           ColorDataMember="Temperature" 
                           MarkerVisible="True">
            <!-- Specify the colorizer to paint point markers. -->
            <dxc:LineSeries2D.Colorizer>
                <dxc:RangeColorizer RangeStops="-40 -30 -20 -15 -10 -5 0 5 10 15 20 30" 
                                    LegendTextPattern="{}{V1:F0}°C — {V2:F0}°C">
                    <dxc:RangeColorizer.Palette>
                        <dxc:CustomPalette>
                            <dxc:CustomPalette.Colors>
                                <Color A="255" R="0"   G="0"   B="139"/>
                                <Color A="255" R="173" G="216" B="230"/>
                                <Color A="255" R="255" G="69"  B="0"/>
                            </dxc:CustomPalette.Colors>
                        </dxc:CustomPalette>
                    </dxc:RangeColorizer.Palette>
                </dxc:RangeColorizer>
            </dxc:LineSeries2D.Colorizer>
            <!-- Specify the colorizer to paint the line series segments. -->
            <dxc:LineSeries2D.SegmentColorizer>               
                <dxc:PointBasedSegmentColorizer x:Name="segmentColorizer" Direction="Backward"/>
            </dxc:LineSeries2D.SegmentColorizer>
        </dxc:LineSeries2D>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

The following table lists the related API members:

Member Description
PointBasedSegmentColorizer The colorizer that uses the point marker colors to paint line/area segments.
PointBasedSegmentColorizer.Direction Gets or sets the direction that is used to distribute the point marker color.
ColorDistributionDirection Lists values that define the direction used by point markers to distribute a color among segments.
SegmentSeries2DBase.SegmentColorizer Gets or sets the colorizer that colors the line/area segments.
See Also