Charts for .NET MAUI. Color Gradients for Lines and Areas
- 7 minutes to read
Charts allow you to apply color gradients to lines and areas.
Charts use colorizers to apply colors to series. For example, to apply color gradients to a line, you should use the following colorizers:
- a segment colorizer—applies colors to points within a segment based on a point colorizer. A gradient colorizer uses segment end color to specify the color grades.
- a point colorizer—applies colors to points based on a pallet. You can use the default or custom pallet.
This topic explains how to paint lines and areas with color gradients.
How to Colorize Lines
Assign a segment colorizer to a series’s SegmentColorizer property. For a range area series, use the Line1SegmentColorizer/Line2SegmentColorizer properties.
The table below lists series and supported colorizers.
| Series Type | Segment Colorizer |
|---|---|
| Line, Area, and RangeArea | GradientPointBasedSegmentColorizer |
| StackedArea | GradientPointBasedStackedSegmentColorizer |
Assign a point colorizer to the segment colorizer’s PointColorizer property. The following point colorizers are supported:
- ColorEachPointColorizer—allows you to use colors from the default or custom palette.
- ValueBandPointColorizer (StackedValueBandPointColorizer for a stacked area series) or CustomValueBandPointColorizer—allows you to specify colors for point value ranges.
- ICustomPointColorizer or IIndexBasedCustomPointColorizer—allows you to specify point colors according to a custom algorithm based on point arguments/values or custom data fields.
Example
In this example, the temperature curve in the spline chart is colored based on ranges of temperature values.
using System;
using System.Collections.Generic;
namespace SegmentColorizerExample
{
public class ViewModel
{
public List<DataItem> Data { get; }
public ViewModel()
{
Data = new List<DataItem>() {
new DataItem() { Argument = new DateTime(2018, 1, 1), Value = -17.5 },
new DataItem() { Argument = new DateTime(2018, 1, 10), Value = -1.4 },
new DataItem() { Argument = new DateTime(2018, 1, 20), Value = -22 },
new DataItem() { Argument = new DateTime(2018, 1, 30), Value = -26.2 },
new DataItem() { Argument = new DateTime(2018, 2, 10), Value = -17.5 },
new DataItem() { Argument = new DateTime(2018, 2, 20), Value = -15.7 },
new DataItem() { Argument = new DateTime(2018, 2, 28), Value = -7.8 },
new DataItem() { Argument = new DateTime(2018, 3, 10), Value = -8.8 },
new DataItem() { Argument = new DateTime(2018, 3, 20), Value = 1.3 },
new DataItem() { Argument = new DateTime(2018, 3, 30), Value = -7.5 },
new DataItem() { Argument = new DateTime(2018, 4, 10), Value = 1.5 },
new DataItem() { Argument = new DateTime(2018, 4, 20), Value = 8.5 },
new DataItem() { Argument = new DateTime(2018, 4, 30), Value = 11 },
new DataItem() { Argument = new DateTime(2018, 5, 10), Value = 12.2 },
new DataItem() { Argument = new DateTime(2018, 5, 20), Value = 13.7 },
new DataItem() { Argument = new DateTime(2018, 5, 30), Value = 8.3 },
new DataItem() { Argument = new DateTime(2018, 6, 10), Value = 15.3 },
new DataItem() { Argument = new DateTime(2018, 6, 20), Value = 19.1 },
new DataItem() { Argument = new DateTime(2018, 6, 30), Value = 22.3 },
new DataItem() { Argument = new DateTime(2018, 7, 10), Value = 22.2 },
new DataItem() { Argument = new DateTime(2018, 7, 20), Value = 24.5 },
new DataItem() { Argument = new DateTime(2018, 7, 30), Value = 21.4 },
new DataItem() { Argument = new DateTime(2018, 8, 10), Value = 21.2 },
new DataItem() { Argument = new DateTime(2018, 8, 20), Value = 15.6 },
new DataItem() { Argument = new DateTime(2018, 8, 30), Value = 15 },
};
}
}
public class DataItem
{
public DateTime Argument { get; set; }
public double Value { get; set; }
}
}
How to Colorize Areas
Assign a fill colorizer to a series’ FillColorizer property. The table below contains series and supported fill colorizers.
| Series Type | Fill Colorizer |
|---|---|
| Area | SegmentBasedFillColorizer |
| RangeArea | SegmentBasedRangeFillColorizer |
| StackedArea | SegmentBasedStackedFillColorizer |
Assign a segment colorizer object to the fill colorizer’s SegmentColorizer property. The table below contains segment colorizers and supported fill colorizers.
| Fill Colorizer | Segment Colorizer |
|---|---|
| SegmentBasedFillColorizer, SegmentBasedRangeFillColorizer (SegmentColorizer1/SegmentColorizer2 properties) | GradientPointBasedSegmentColorizer |
| SegmentBasedStackedFillColorizer | GradientPointBasedStackedSegmentColorizer |
Finally, assign a point colorizer to the segment colorizer’s PointColorizer property. The following point colorizers are supported:
- ColorEachPointColorizer—allows you to use colors from the default or custom palette.
- ValueBandPointColorizer (StackedValueBandPointColorizer for a stacked area series) or CustomValueBandPointColorizer—allows you to specify colors for point value ranges.
- ICustomPointColorizer or IIndexBasedCustomPointColorizer—allows you to specify point colors according to a custom algorithm based on point arguments/values and values of the chart’s bound data source.
Example
In this example, the area chart visualizes the visible light spectrum.
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using DevExpress.Maui.Charts;
using Microsoft.Maui.Controls;
namespace SegmentColorizerExample
{
public class ViewModel
{
LightSpectorData data = new LightSpectorData();
public IList<NumericData> LightSpectorData => this.data.LightSpectors;
}
public class LightSpectorData
{
public IList<NumericData> LightSpectors { get; }
public LightSpectorData()
{
LightSpectors = new List<NumericData>();
using (Stream stream =
GetType().Assembly.GetManifestResourceStream("SegmentColorizerExample.LightSpector.dat"))
{
StreamReader reader = new StreamReader(stream);
string data = reader.ReadToEnd();
String[] dataItems = data.Split(new String[] { "\n" },
StringSplitOptions.RemoveEmptyEntries);
for (int i = 0; i < dataItems.Length; i++)
{
String[] row = dataItems[i].Split(new String[] { " " },
StringSplitOptions.RemoveEmptyEntries);
double argument = Convert.ToDouble(row[0], CultureInfo.InvariantCulture);
double value = Convert.ToDouble(row[1], CultureInfo.InvariantCulture);
LightSpectors.Add(new NumericData(argument, value));
}
}
}
}
public class LightSpectorColorizer : ICustomPointColorizer, ILegendItemProvider
{
Color waveLengthToColor(double waveLength)
{
double gamma = 0.8;
double red = 0.0;
double green = 0.0;
double blue = 0.0;
if (waveLength <= 440)
{
double attenuation = 0.3 + 0.7 * (waveLength - 380) / (440 - 380);
red = Math.Pow((-(waveLength - 440) / (440 - 380)) * attenuation, gamma);
green = 0.0;
blue = Math.Pow(1.0 * attenuation, gamma);
}
else if (waveLength <= 490)
{
red = 0.0;
green = Math.Pow((waveLength - 440) / (490 - 440), gamma);
blue = 1.0;
}
else if (waveLength <= 510)
{
red = 0.0;
green = 1.0;
blue = Math.Pow(-(waveLength - 510) / (510 - 490), gamma);
}
else if (waveLength <= 580)
{
red = Math.Pow((waveLength - 510) / (580 - 510), gamma);
green = 1.0;
blue = 0.0;
}
else if (waveLength <= 645)
{
red = 1.0;
green = Math.Pow(-(waveLength - 645) / (645 - 580), gamma);
blue = 0.0;
}
else if (waveLength <= 750)
{
double attenuation = 0.3 + 0.7 * (750 - waveLength) / (750 - 645);
red = Math.Pow(1.0 * attenuation, gamma);
green = 0.0;
blue = 0.0;
}
return Color.FromRgb(red, green, blue);
}
protected virtual double[] GetWavesForLegend()
{
return new double[] { 400, 440, 480, 540, 580, 610, 650 };
}
Color ICustomPointColorizer.GetColor(ColoredPointInfo info)
{
return waveLengthToColor(info.NumericArgument);
}
ILegendItemProvider ICustomPointColorizer.GetLegendItemProvider()
{
return this;
}
CustomLegendItem ILegendItemProvider.GetLegendItem(int index)
{
double waveLength = GetWavesForLegend()[index];
Color color = waveLengthToColor(waveLength);
return new CustomLegendItem($"{waveLength} nm", color);
}
int ILegendItemProvider.GetLegendItemCount()
{
return GetWavesForLegend().Length;
}
}
public class NumericData
{
public double Argument { get; private set; }
public double Value { get; private set; }
public NumericData(double argument, double value)
{
Argument = argument;
Value = value;
}
}
}