Skip to main content

GradientPointBasedSegmentColorizer Class

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

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.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

  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="http://schemas.devexpress.com/xamarin/2014/forms/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>
    

    View Example

Inheritance

Object
ChartElement
GradientPointBasedSegmentColorizer
See Also