Skip to main content

ValueBandPointColorizer Class

A value range colorizer that colors series points based on their Y-axis values.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.Charts

#Declaration

#Remarks

Use this colorizer type to color points of a Point, Bar, Line, Area, RangeArea, StackedArea, StackedBar or Bubble series based on Y-axis values:

  1. Assign a ValueBandPointColorizer object to the series’s PointColorizer property (Line1PointColorizer/Line2PointColorizer for a range area series).
  2. Populate the colorizer’s ColorStops collection with ColorStop objects. Each ColorStop object defines a value range (a pair of Y-axis values) and color. If a Y-axis value falls within the range, the point is painted with this color.

#Example

In this example, the bar chart displays cryptocurrency portfolio yield. It colors series points red when their Y-axis values are between -100 and 0, and green when values are between 0 and 100. Note that this chart diagram is rotated.

Band Colorizer

  1. Create a data source – a list of objects each of which has the Ticker property that returns a string (point argument) and the Profit property that returns a number (point value).

    using Xamarin.Forms;
    using System.Collections.Generic;
    
    namespace ColorizerExample {
        public class ViewModel {
            public List<CryptocurrencyPortfolioItem> CryptocurrencyPortfolioData { get; }
    
            public ViewModel(){
                CryptocurrencyPortfolioData = new List<CryptocurrencyPortfolioItem>(){
                    new CryptocurrencyPortfolioItem("NEO", 13),
                    new CryptocurrencyPortfolioItem("HT", -12),
                    new CryptocurrencyPortfolioItem("DASH", 9),
                    new CryptocurrencyPortfolioItem("LINK", -3),
                    new CryptocurrencyPortfolioItem("ETC", -8),
                    new CryptocurrencyPortfolioItem("XMR", 10),
                    new CryptocurrencyPortfolioItem("TRX", 5),
                    new CryptocurrencyPortfolioItem("ADA", -7),
                    new CryptocurrencyPortfolioItem("XTZ", 2),
                    new CryptocurrencyPortfolioItem("BNB", 10),
                    new CryptocurrencyPortfolioItem("USDT", -7),
                    new CryptocurrencyPortfolioItem("EOS", 20),
                    new CryptocurrencyPortfolioItem("LTC", -13),
                    new CryptocurrencyPortfolioItem("BSV", -7),
                    new CryptocurrencyPortfolioItem("BCH", 42),
                    new CryptocurrencyPortfolioItem("XRP", -8),
                    new CryptocurrencyPortfolioItem("ETH", 12),
                    new CryptocurrencyPortfolioItem("BTC", 24),
                };
            }
        }
    
        public class CryptocurrencyPortfolioItem {
            public string Ticker { get; private set; }
            public double Profit { get; private set; }
    
            public CryptocurrencyPortfolioItem(string ticker, double profit) {
                Ticker = ticker;
                Profit = profit;
            }
        }
    }
    
  2. Assign a ValueBandPointColorizer object to the BarSeries.PointColorizer property. Populate the colorizer’s ColorStops collection with two ColorStop objects that specify colors for ranges of point values.

    <ContentPage xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:dxc="http://schemas.devexpress.com/xamarin/2014/forms/charts"
                 x:Class="ColorizerExample.MainPage"
                 xmlns:local="clr-namespace:ColorizerExample">
        <ContentPage.BindingContext>
            <local:ViewModel/>
        </ContentPage.BindingContext>
        <dxc:ChartView x:Name="chart" Rotated="True">
            <dxc:ChartView.Series>
                <dxc:BarSeries LegendTextPattern="{}Profit from {CLV}% to {CHV}%">
                    <!-- Bind the series to the data source. -->
                    <dxc:BarSeries.Data>
                        <dxc:SeriesDataAdapter 
                                DataSource="{Binding CryptocurrencyPortfolioData}"
                                ArgumentDataMember="Ticker">
                            <dxc:ValueDataMember Type="Value" Member="Profit"/>
                        </dxc:SeriesDataAdapter>
                    </dxc:BarSeries.Data>
    
                    <dxc:BarSeries.Label>
                        <dxc:BarSeriesLabel Position="Outside" 
                                            Behavior="Cut" 
                                            TextPattern="{}{V}%"/>
                    </dxc:BarSeries.Label>
    
                    <dxc:BarSeries.PointColorizer>
                        <dxc:ValueBandPointColorizer>
                            <dxc:ValueBandPointColorizer.ColorStops>
                                <dxc:ColorStop Color="Green" Value1="0" Value2="100"/>
                                <dxc:ColorStop Color="Red" Value1="0" Value2="-100"/>
                            </dxc:ValueBandPointColorizer.ColorStops>
                        </dxc:ValueBandPointColorizer>
                    </dxc:BarSeries.PointColorizer>
                </dxc:BarSeries>
            </dxc:ChartView.Series>
    
            <!-- Specify axis and legend settings here. -->
        </dxc:ChartView>
    </ContentPage>
    

    View Example

#Inheritance

See Also