Skip to main content

ICustomPointColorizer Interface

An interface that should be implemented by a class that defines a custom point colorizer for a point, bar, line, area or range area series.

Namespace: DevExpress.Maui.Charts

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public interface ICustomPointColorizer :
    IPointColorizer

Example

In this example, the bar chart displays monthly values colored based on the season.

Custom Point Colorizer

  1. Create a data source – a list of objects that define data points with date-time arguments and numeric values.
  2. Create a colorizer class (CustomColorizer in this example) that implements the ICustomPointColorizer interface.
    Implement the GetColor method to return a data point’s color based on a ColoredPointInfo object passed as the method’s parameter. Use the ColoredPointInfo.DateTimeArgument property to obtain the data point’s argument value.

    using System;
    using Microsoft.Maui.Controls;
    using Microsoft.Maui.Graphics;
    using System.Collections.Generic;
    using DevExpress.Maui.Charts;
    
    namespace ColorizerExample {
        public class ViewModel {
            public List<DataItem> Data { get; }
    
            public ViewModel() {
                Data = new List<DataItem>() {
                    new DataItem() { Argument = new DateTime(2020, 1, 1), Value = 3 },
                    new DataItem() { Argument = new DateTime(2020, 2, 1), Value = 5 },
                    new DataItem() { Argument = new DateTime(2020, 3, 1), Value = 7 },
                    new DataItem() { Argument = new DateTime(2020, 4, 1), Value = 2 },
                    new DataItem() { Argument = new DateTime(2020, 5, 1), Value = 6 },
                    new DataItem() { Argument = new DateTime(2020, 6, 1), Value = 4 },
                    new DataItem() { Argument = new DateTime(2020, 7, 1), Value = 1 },
                    new DataItem() { Argument = new DateTime(2020, 8, 1), Value = 8 },
                    new DataItem() { Argument = new DateTime(2020, 9, 1), Value = 3 },
                    new DataItem() { Argument = new DateTime(2020, 10, 1), Value = 9 },
                    new DataItem() { Argument = new DateTime(2020, 11, 1), Value = 4 },
                    new DataItem() { Argument = new DateTime(2020, 12, 1), Value = 7 },
                };
            }
        }
    
        public class DataItem {
            public DateTime Argument { get; set; }
            public double Value { get; set; }
        }
    
        public class CustomColorizer : ICustomPointColorizer {
            Color ICustomPointColorizer.GetColor(ColoredPointInfo info) {
                switch (info.DateTimeArgument.Month) {
                    case 12:
                    case 1:
                    case 2:
                        return Color.FromHex("#5982db");
                    case 3:
                    case 4:
                    case 5:
                        return Color.FromHex("#755dd9");
                    case 6:
                    case 7:
                    case 8:
                        return Color.FromHex("#9b57d3");
                    case 9:
                    case 10:
                    case 11:
                        return Color.FromHex("#92278f");
                    default:
                        return Color.Default;
                }
            }
            public ILegendItemProvider GetLegendItemProvider() {
                return null;
            }
        }
    }
    
  3. Assign a CustomColorizer object to the BarSeries.PointColorizer property.

    <ContentPage
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
        xmlns:local="clr-namespace:ColorizerExample"
        x:Class="ColorizerExample.MainPage">
        <ContentPage.BindingContext>
            <local:ViewModel />
        </ContentPage.BindingContext>
        <dxc:ChartView>
            <dxc:ChartView.Series>
                <dxc:BarSeries PointColorizer="{local:CustomColorizer}">
                    <!-- Bind the series to the data source. -->
                    <dxc:BarSeries.Data>
                        <dxc:SeriesDataAdapter DataSource="{Binding Data}" 
                                               ArgumentDataMember="Argument">
                            <dxc:ValueDataMember Member="Value" Type="Value" />
                        </dxc:SeriesDataAdapter>
                    </dxc:BarSeries.Data>
                </dxc:BarSeries>
            </dxc:ChartView.Series>
            <dxc:ChartView.AxisX>
                <dxc:DateTimeAxisX MeasureUnit="Month" /> 
            </dxc:ChartView.AxisX>
        </dxc:ChartView>
    </ContentPage>
    
See Also