ColorDataAdapter.ColorDataMember Property

Gets or sets the name of the data source field that contains point colors.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.Charts

Declaration

public string ColorDataMember { get; set; }

Property Value

Type	Description
String	The data source field name.

Example

In this example, the bar chart visualizes GDP values for the G20 and paints bars with colors from the specified field of the data source. Legend items obtain descriptions for these colors from another field.

1. Create a data source – a list of objects each of which stores a country’s name, GDP value, region (the part of the world where the country is located), and color for this region.

   C#

   using Xamarin.Forms;
   using System.Collections.Generic;
   
   namespace ColorizerExample {
       public class ViewModel {
           CountryStatisticsData data = new CountryStatisticsData();
           public List<CountryStatistics> CountryStatisticsData => this.data.SeriesData;
       }
   
       public class CountryStatisticsData {
           readonly List<CountryStatistics> data = new List<CountryStatistics> {
               new CountryStatistics("Argentina", 16011.6728032264, "America", Color.FromHex("9d419c")),
               new CountryStatistics("Australia", 38159.6336533223, "Australia", Color.FromHex("36a3a6")),
               new CountryStatistics("Brazil", 11210.3908053823, "America", Color.FromHex("9d419c")),
               new CountryStatistics("Canada", 39050.1673163719, "America", Color.FromHex("9d419c")),
               new CountryStatistics("China", 7599, "Asia", Color.FromHex("70c92f")),
               new CountryStatistics("France", 34123.1966249035, "Europe", Color.FromHex("cc3836")),
               new CountryStatistics("Germany", 37402.2677660974, "Europe", Color.FromHex("cc3836")),
               new CountryStatistics("India", 3425.4489267524, "Asia", Color.FromHex("70c92f")),
               new CountryStatistics("Indonesia", 4325.2533282173, "Asia", Color.FromHex("70c92f")),
               new CountryStatistics("Italy", 31954.1751781228, "Europe", Color.FromHex("cc3836")),
               new CountryStatistics("Japan", 33732.8682226596, "Asia", Color.FromHex("70c92f")),
               new CountryStatistics("Mexico", 14563.884253986, "America", Color.FromHex("9d419c")),
               new CountryStatistics("Russia", 19891.3528339013, "Europe", Color.FromHex("cc3836")),
               new CountryStatistics("Saudi Arabia", 22713.4852913284, "Asia", Color.FromHex("70c92f")),
               new CountryStatistics("South Africa", 10565.1840563081, "Africa", Color.FromHex("f8ca00")),
               new CountryStatistics("South Korea", 29101.0711400706, "Asia", Color.FromHex("70c92f")),
               new CountryStatistics("Turkey", 15686.860167575, "Africa", Color.FromHex("f8ca00")),
               new CountryStatistics("United Kingdom", 35686.1997705521, "Europe", Color.FromHex("cc3836")),
               new CountryStatistics("Spain", 32230.3585974199, "Europe", Color.FromHex("cc3836")),
               new CountryStatistics("USA", 47153.0094273427, "America", Color.FromHex("9d419c")),
           };
           public List<CountryStatistics> SeriesData => this.data;
       }
   
       public class CountryStatistics {
           public string Country { get; private set; }
           public double Gdp { get; private set; }
           public string Region { get; private set; }
           public Color Color { get; private set; }
   
           public CountryStatistics(string country, double gdp, string region, Color color) {
               Country = country;
               Gdp = gdp;
               Region = region;
               Color = color;
           }
       }
   }
   

2. Set the BarSeries.PointColorizer property to a ColorDataAdapter object with the following properties specified:

   • DataSource – a data source of point colors and legend item strings.
     In this example, the data source contains both data required to build series points (arguments and values) and data used to color points and generate legend items. However, you can store point colors and legend items in a separate data source. In this case, the colorizer applies colors to points in turn. If the number of colors is less than the number of data points, colors are reused.
   • ColorDataMember – a data source field that contains colors for series points.
   • LegendTextDataMember – a data source field that contains text strings for legend items. The legend displays all unique Color/LegendText value pairs.
   XAML

   <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 Rotated="True">
           <dxc:ChartView.Series>
               <dxc:BarSeries>
                   <!-- Bind the series to the data source. -->
                   <dxc:BarSeries.Data>
                       <dxc:SeriesDataAdapter DataSource="{Binding CountryStatisticsData}"
                                              ArgumentDataMember="Country">
                           <dxc:ValueDataMember Type="Value" Member="Gdp"/>
                       </dxc:SeriesDataAdapter>
                   </dxc:BarSeries.Data>
   
                   <!-- Retrieve series point colors and legend items from the data source. -->
                   <dxc:BarSeries.PointColorizer>
                       <dxc:ColorDataAdapter DataSource="{Binding CountryStatisticsData}"
                                             ColorDataMember="Color"
                                             LegendTextDataMember="Region"/>
                   </dxc:BarSeries.PointColorizer>
               </dxc:BarSeries>
           </dxc:ChartView.Series>
   
           <!-- Specify axis and legend settings here. -->
       </dxc:ChartView>
   </ContentPage>