GradientPointBasedSegmentColorizer Class

A colorizer that paints line segments of the line, area or range area series based on the specified point colorizer.

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class GradientPointBasedSegmentColorizer :
    ChartElement,
    ISegmentColorizer

Example

In this example, the spline chart displays the temperature curve colored based on ranges of temperature values.

Line Segment Colorizer

Create a data source - a list of objects that define data points with date-time arguments and numeric values.

using System;
using System.Collections.Generic;

namespace SegmentColorizerExample {

    public class ViewModel {
        public List<DataItem> Data { get; }

        public ViewModel(){
            Data = new List<DataItem>() {
                new DataItem() { Argument = new DateTime(2018, 1, 1), Value = -17.5 },
                new DataItem() { Argument = new DateTime(2018, 1, 10), Value = -1.4 },
                new DataItem() { Argument = new DateTime(2018, 1, 20), Value = -22 },
                new DataItem() { Argument = new DateTime(2018, 1, 30), Value = -26.2 },
                new DataItem() { Argument = new DateTime(2018, 2, 10), Value = -17.5 },
                new DataItem() { Argument = new DateTime(2018, 2, 20), Value = -15.7 },
                new DataItem() { Argument = new DateTime(2018, 2, 28), Value = -7.8 },
                new DataItem() { Argument = new DateTime(2018, 3, 10), Value = -8.8 },
                new DataItem() { Argument = new DateTime(2018, 3, 20), Value = 1.3 },
                new DataItem() { Argument = new DateTime(2018, 3, 30), Value = -7.5 },
                new DataItem() { Argument = new DateTime(2018, 4, 10), Value = 1.5 },
                new DataItem() { Argument = new DateTime(2018, 4, 20), Value = 8.5 },
                new DataItem() { Argument = new DateTime(2018, 4, 30), Value = 11 },
                new DataItem() { Argument = new DateTime(2018, 5, 10), Value = 12.2 },
                new DataItem() { Argument = new DateTime(2018, 5, 20), Value = 13.7 },
                new DataItem() { Argument = new DateTime(2018, 5, 30), Value = 8.3 },
                new DataItem() { Argument = new DateTime(2018, 6, 10), Value = 15.3 },
                new DataItem() { Argument = new DateTime(2018, 6, 20), Value = 19.1 },
                new DataItem() { Argument = new DateTime(2018, 6, 30), Value = 22.3 },
                new DataItem() { Argument = new DateTime(2018, 7, 10), Value = 22.2 },
                new DataItem() { Argument = new DateTime(2018, 7, 20), Value = 24.5 },
                new DataItem() { Argument = new DateTime(2018, 7, 30), Value = 21.4 },
                new DataItem() { Argument = new DateTime(2018, 8, 10), Value = 21.2 },
                new DataItem() { Argument = new DateTime(2018, 8, 20), Value = 15.6 },
                new DataItem() { Argument = new DateTime(2018, 8, 30), Value = 15 },
            };
        }
    }

    public class DataItem {
        public DateTime Argument { get; set; }
        public double Value { get; set; }
    }
}

Assign a GradientPointBasedSegmentColorizer object to the SplineSeries.SegmentColorizer property.

Assign a ValueBandPointColorizer object to the GradientPointBasedSegmentColorizer.PointColorizer property. Populate the colorizer’s ColorStops collection with ColorStop objects that specify colors for ranges of temperature values.

XAML

<ContentPage
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
    x:Class="SegmentColorizerExample.MainPage"
    xmlns:local="clr-namespace:SegmentColorizerExample">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <dxc:ChartView>
        <dxc:ChartView.Series>
            <dxc:SplineSeries LegendTextPattern="{}{CLV}°C — {CHV}°C">
                <dxc:SplineSeries.Data>
                    <dxc:SeriesDataAdapter DataSource="{Binding Data}" ArgumentDataMember="Argument">
                           <dxc:ValueDataMember Member="Value" Type="Value" />
                    </dxc:SeriesDataAdapter>
                </dxc:SplineSeries.Data>
                <dxc:SplineSeries.SegmentColorizer>
                    <dxc:GradientPointBasedSegmentColorizer>
                        <dxc:GradientPointBasedSegmentColorizer.PointColorizer>
                            <dxc:ValueBandPointColorizer>
                                <dxc:ValueBandPointColorizer.ColorStops>
                                    <dxc:ColorStop  Color="#00008b" Value1="-40" Value2="-30"/>
                                    <dxc:ColorStop Color="#222b9d" Value1="-30" Value2="-20"/>
                                    <dxc:ColorStop Color="#4556af" Value1="-20" Value2="-15"/>
                                    <dxc:ColorStop Color="#6781c1" Value1="-15" Value2="-10"/>
                                    <dxc:ColorStop Color="#8aacd3" Value1="-10" Value2="-5"/>
                                    <dxc:ColorStop Color="#add8e6" Value1="-5" Value2="0"/>
                                    <dxc:ColorStop Color="#bdbab8" Value1="0" Value2="5"/>
                                    <dxc:ColorStop Color="#cd9d8a" Value1="5" Value2="10"/>
                                    <dxc:ColorStop Color="#de7f5b" Value1="10" Value2="15"/>
                                    <dxc:ColorStop Color="#ee622d" Value1="15" Value2="20"/>
                                    <dxc:ColorStop Color="#ff4500" Value1="20" Value2="30"/>
                                </dxc:ValueBandPointColorizer.ColorStops>
                            </dxc:ValueBandPointColorizer>
                        </dxc:GradientPointBasedSegmentColorizer.PointColorizer>
                    </dxc:GradientPointBasedSegmentColorizer>
                </dxc:SplineSeries.SegmentColorizer>
            </dxc:SplineSeries>
        </dxc:ChartView.Series>
        <dxc:ChartView.Legend>
            <dxc:Legend Orientation="TopToBottom"
                        HorizontalPosition="RightOutside"
                        VerticalPosition="Center"/>
        </dxc:ChartView.Legend>
        <dxc:ChartView.AxisX>
            <dxc:DateTimeAxisX>
                <dxc:DateTimeAxisX.Label>
                     <dxc:AxisLabel TextFormat="MMM"/>
                </dxc:DateTimeAxisX.Label>
            </dxc:DateTimeAxisX>
        </dxc:ChartView.AxisX>
    </dxc:ChartView>
</ContentPage>