GradientPointBasedSegmentColorizer Class
A colorizer that paints line segments of the line, area or range area series based on the specified point colorizer.
Namespace: DevExpress.Maui.Charts
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.
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.
<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>
Inheritance
Object
BindableObject
Element
DevExpress.Maui.Core.Internal.DXElementBaseCore
ChartElement
GradientPointBasedSegmentColorizer
See Also