ColorStop Class

Defines the color for series points whose values fall within the specified range.

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class ColorStop :
    ChartElement

Example

In this example, the bubble chart displays GDP values for the G20. A point’s size indicates the country population and the color indicates the HPI.

Custom Band Colorizer

Create a data source – a list of objects each of which stores a country’s name, GDP value, population, and HPI.

Create a class (HpiProvider, in this example) that implements the ICustomColorizerNumericValueProvider interface and the GetValueForColorizer method, which returns the Hpi value for a series point.

using System.Collections.Generic;
using DevExpress.Maui.Charts;

namespace ColorizerExample {
    public class ViewModel {
        HpiProvider valueProvider = new HpiProvider();
        public List<CountryStatistics> CountryStatisticsData => this.valueProvider.SeriesData;
    }

    public class HpiProvider : ICustomColorizerNumericValueProvider {
        private CountryStatisticsData data = new CountryStatisticsData();

        public double GetValueForColorizer(int index) {
            return this.data.SeriesData[index].Hpi;
        }

        public List<CountryStatistics> SeriesData => this.data.SeriesData;
    }

    public class CountryStatisticsData {
        readonly List<CountryStatistics> data = new List<CountryStatistics> {
            new CountryStatistics("Argentina", 16011.6728032264, 40412000, 54.055),
            new CountryStatistics("Australia", 38159.6336533223, 40412000, 41.980),
            new CountryStatistics("Brazil", 11210.3908053823, 194946000, 52.9),
            new CountryStatistics("Canada", 39050.1673163719, 34126000, 43.56),
            new CountryStatistics("China", 7599, 1338300000, 44.66),
            new CountryStatistics("France", 34123.1966249035, 64895000, 46.523),
            new CountryStatistics("Germany", 37402.2677660974, 81777000, 47.2),
            new CountryStatistics("India", 3425.4489267524, 1224615000, 50.865),
            new CountryStatistics("Indonesia", 4325.2533282173, 239870000, 55.481),
            new CountryStatistics("Italy", 31954.1751781228, 60483000, 46.352),
            new CountryStatistics("Japan", 33732.8682226596, 127451000, 47.508),
            new CountryStatistics("Mexico", 14563.884253986, 113423000, 52.894),
            new CountryStatistics("Russia", 19891.3528339013, 141750000, 34.518),
            new CountryStatistics("Saudi Arabia", 22713.4852913284, 27448000, 45.965),
            new CountryStatistics("South Africa", 10565.1840563081, 49991000, 28.190),
            new CountryStatistics("South Korea", 29101.0711400706, 48875000, 43.781),
            new CountryStatistics("Turkey", 15686.860167575, 72752000, 47.623),
            new CountryStatistics("United Kingdom", 35686.1997705521, 62232000, 47.925),
            new CountryStatistics("Spain", 32230.3585974199, 46071000, 44.063),
            new CountryStatistics("USA", 47153.0094273427, 309349000, 37.340),
        };
        public List<CountryStatistics> SeriesData => this.data;
    }

    public class CountryStatistics {
        public string Country { get; private set; }
        public double Gdp { get; private set; }
        public double Population { get; private set; }
        public double Hpi { get; private set; }

        public CountryStatistics(string country, double gdp, double population, double hpi) {
            Country = country;
            Gdp = gdp;
            Population = population;
            Hpi = hpi;
        }
    }
}

Set the BubbleSeries.PointColorizer property to a CustomValueBandPointColorizer object and assign an HpiProvider object to the CustomValueBandPointColorizer.ValueProvider property.

Populate the colorizer’s ColorStops collection to specify colors for ranges of HPI values.

XAML

<ContentPage
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
    x:Class="ColorizerExample.MainPage"
    xmlns:local="clr-namespace:ColorizerExample">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <dxc:ChartView Rotated="True">
        <dxc:ChartView.Series>
            <dxc:BubbleSeries LegendTextPattern="{}{CLV} - {CHV} HPI">
                <!-- Bind the series to the data source. -->
                <dxc:BubbleSeries.Data>
                    <dxc:SeriesDataAdapter DataSource="{Binding CountryStatisticsData}" 
                                           ArgumentDataMember="Country">
                        <dxc:ValueDataMember Type="Value" Member="Gdp"/>
                        <dxc:ValueDataMember Type="Weight" Member="Population"/>
                    </dxc:SeriesDataAdapter>
                </dxc:BubbleSeries.Data>

                <dxc:BubbleSeries.PointColorizer>
                    <dxc:CustomValueBandPointColorizer 
                        ValueProvider="{local:HpiProvider}">
                        <dxc:CustomValueBandPointColorizer.ColorStops>
                            <dxc:ColorStop Color="#CCff5a19" Value1="22" Value2="30"/>
                            <dxc:ColorStop Color="#CCfead2d" Value1="30" Value2="38"/>
                            <dxc:ColorStop Color="#CCe5e335" Value1="38" Value2="46"/>
                            <dxc:ColorStop Color="#CCace45c" Value1="46" Value2="54"/>
                            <dxc:ColorStop Color="#CC6ec95b" Value1="54" Value2="64"/>
                        </dxc:CustomValueBandPointColorizer.ColorStops>
                    </dxc:CustomValueBandPointColorizer>
                </dxc:BubbleSeries.PointColorizer>
            </dxc:BubbleSeries>
        </dxc:ChartView.Series>

        <!-- Specify axis and legend settings here. -->
    </dxc:ChartView>
</ContentPage>