Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

C#
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

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

    <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

System.Object
BindableObject
Element
ChartElementBase
ChartElement
GradientPointBasedSegmentColorizer
See Also