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

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

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