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.

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

   C#

   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; }
       }
   }
   

2. Assign a GradientPointBasedSegmentColorizer object to the SplineSeries.SegmentColorizer property.

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

Implements

INotifyPropertyChanged

ISegmentColorizer

Inheritance

Object

BindableObject

ChartElement

GradientPointBasedSegmentColorizer