LineSeries.SegmentColorizer Property

Gets or sets the colorizer that paints line segments. This is a bindable property.

Namespace: DevExpress.Maui.Charts

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public ISegmentColorizer SegmentColorizer { get; set; }

Property Value

Type	Description
ISegmentColorizer	The colorizer object that paints line segments.

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>