ColoredPointInfo Class

Stores information about a series point for which a custom point colorizer specifies a color.

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class ColoredPointInfo :
    ColoredPointInfoBase

Example

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

Custom Point Colorizer

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

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

Assign a CustomColorizer object to the BarSeries.PointColorizer property.

XAML

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