mobilecontrols-401980-xamarin-forms-charts-examples-color-series.md
A series point colorizer helps you color-code series points to enhance data visualization. Use a series point colorizer to specify one or more conditions based on which a chart applies colors to series points. For example, point colors indicate the Happy Planet Index (HPI for short) on the following chart:
You can use a predefined colorizer or implement a custom colorizer for series points.
ChartView ships with point and value range colorizers that use predefined algorithms to select point colors.
A predefined point colorizer uses colors from the default or custom palette to paint series points on a chart. Colors apply in the same order they appear in the palette.
To enable a point colorizer for a series, assign a ColorEachPointColorizer object to the series’s PointColorizer property.
Default Colors
Custom Colors
You can color series points based on their Y-axis values. To do this, use a value range colorizer:
The following table lists series types and value range colorizers they support:
|
Series Type
|
Value Range Colorizer
| | | --- | --- | --- | |
Area, RangeArea, Point, Bar, Line,
StackedArea, StackedBar, and Bubble
|
| |
|
| |
|
StackedValueBandPointColorizer
| |
|
WeightedValueBandPointColorizer
|
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.
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).
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.
You can also implement custom colorizers to paint series points.
The ChartView can color points of a series according to a custom algorithm based on point arguments/values and values of the chart’s bound data source.
Create a class that implements a custom colorizer interface and assign this class instance to the series’s PointColorizer property. The following table lists custom colorizer interfaces that ChartView series support:
|
Series Type
|
Colorizer Interface
|
Colorizer Description
| | | --- | --- | --- | --- | |
Area, RangeArea, Point, Bar, and Line
|
|
The GetColor method’s parameter (ColoredPointInfo) allows you to obtain the following information about a series point and use it to create a color rule:
| |
|
| |
|
| |
|
| |
All series, except for financial and pie series
|
IIndexBasedCustomPointColorizer
|
The GetColor method’s parameter is an index of the data source’s item that corresponds to the series point. If data aggregation is enabled, only the index of the first point’s item is passed.
|
In this example, the bar chart displays monthly values colored based on the season.
Create a data source – a list of objects that define data points with date-time arguments and numeric values.
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.
Assign a CustomColorizer object to the BarSeries.PointColorizer property.
In this example, the bar chart visualizes GDP values for the G20 and colors data points according to which part of the world the country belongs.
Create a data source – a list of objects each of which stores a country’s name, GDP value, and the part of the world (region) where the country is located.
Create a class (ColorizerByRegion, in this example) that implements the IIndexBasedCustomPointColorizer interface. Specify a color for each region and implement the IIndexBasedCustomPointColorizer.GetColor method that returns a color for each data point depending on the Region data member’s value.
This class should also implement the IIndexBasedCustomPointColorizer.GetLegendItemProvider method and the ILegendItemProvider interface to specify legend items that show region colors.
Assign a ColorizerByRegion object to the BarSeries.PointColorizer property.
A predefined value range colorizer colors points according to their Y-axis values. If you want a series point’s color to indicate the value of the specified data source field, implement a custom value range colorizer:
You can use a custom value range colorizer for any series except for financial and pie series.
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.
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.
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.
You can bind a colorizer to a data source that stores colors for series points. To do this, use a color data adapter:
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.
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.
Set the BarSeries.PointColorizer property to a ColorDataAdapter object with the following properties specified: