Paints
A Paint
is an object that paints graphical objects in the user interface, it is similar to the Brushes
class for
AvaloniaUI or WPF, LiveCharts defines its own class, it is optimized for the case of the library.
Currently the only official backend for LiveCharts is based on SkiaSharp, that means that
you can use any SkiaSharp feature to render a chart. If you are familiar with SkiaSharp
you might know that there is also an
object called Paint
, the LiveCharts Paint
is a wrapper for the SkiaShap Paint
, but it adds some features such as animations and
has an API that feels more like WPF, it should feel easier to manipulate a LiveCharts Paint
from a perspective of a front-end developer.
There are some paints already defined in the library such as the SolidColorPaint, the LinearGradientPaint, or the RadialGradientPaint but you could also implement your own.
You can assign a paint to a series (Fill
and Stroke
properties) and axes (DataLabelsPaint
and SeparatorPaint
properties) normally,
to indicate how things will render in the user interface, take a look to the following samples:
Null paint
null
is a valid value for the IPaint<T>
type, it means that the visual will be ignored or not drawn in the UI.
Solid color
new LineSeries<int>
{
Values = new []{ 4, 2, 8, 5, 3 },
GeometrySize = 22,
Fill = new SolidColorPaint(SKColors.Red),
Stroke = new SolidColorPaint(SKColors.Blue) { StrokeThickness = 6 },
GeometryStroke = new SolidColorPaint(SKColors.GreenYellow) { StrokeThickness = 6 }
}
Linear gradient
// linear gradients are based on SkiaSharp linear gradients
// for more info please see:
// https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/effects/shaders/linear-gradient
var colors = new[]
{
new SKColor(45, 64, 89),
new SKColor(255, 212, 96)
// ...
// you can add as many colors as you require to build the gradient
// by default all the distance between each color is equal
// use the colorPos parameter in the constructor of the LinearGradientPaint class
// to specify the distance between each color
};
Series = new ISeries[]
{
new ColumnSeries<int>
{
Values = new []{ 3, 7, 2, 9, 4 },
Stroke = null,
// this is an easy way to set a linear gradient:
// Fill = new LinearGradientPaint(new SKColor(255, 140, 148), new SKColor(220, 237, 194))
// but you can customize the gradient
Fill = new LinearGradientPaint(
// the gradient will use the following colors array
new [] { new SKColor(255, 140, 148), new SKColor(220, 237, 194) },
// now with the following points we are specifying the orientation of the gradient
// by default the gradient is orientated horizontally
// defined by the points: (0, 0.5) and (1, 0.5)
// but for this sample we will use a vertical gradient:
// to build a vertical gradient we must specify 2 points that will draw a imaginary line
// the gradient will interpolate colors lineally as it moves following this imaginary line
// the coordinates of these points (X, Y) go from 0 to 1
// where 0 is the start of the axis and 1 the end. Then to build our vertical gradient
// we must go from the point:
// (x0, y0) where x0 could be read as "the middle of the x axis" (0.5) and y0 as "the start of the y axis" (0)
new SKPoint(0.5f, 0),
// to the point:
// (x1, y1) where x1 could be read as "the middle of the x axis" (0.5) and y0 as "the end of the y axis" (1)
new SKPoint(0.5f, 1))
},
new LineSeries<int>
{
Values = new []{ 4, 2, 8, 5, 3 },
GeometrySize = 22,
Stroke = new LinearGradientPaint(colors) { StrokeThickness = 10 },
GeometryStroke = new LinearGradientPaint(colors) { StrokeThickness = 10 },
Fill = null
}
};
Radial gradient
// radial gradients are based on SkiaSharp circular gradients
// for more info please see:
// https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/effects/shaders/circular-gradients
var colors = new[]
{
new SKColor(179, 229, 252),
new SKColor(1, 87, 155)
// ...
// you can add as many colors as you require to build the gradient
// by default all the distance between each color is equal
// use the colorPos parameter in the constructor of the RadialGradientPaint class
// to specify the distance between each color
};
Series = new ISeries[]
{
new PieSeries<int>
{
Values = new []{ 7 },
Stroke = null,
Fill = new RadialGradientPaint(colors),
Pushout = 10
},
new PieSeries<int>
{
Values = new []{ 3 },
Stroke = null,
Fill = new RadialGradientPaint(new SKColor(255, 205, 210), new SKColor(183, 28, 28))
}
};