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

ColoredPointInfo Class

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

Namespace: DevExpress.Maui.Charts

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

#Declaration

C#
public class ColoredPointInfo :
    ColoredPointInfoBase

#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