LiveCharts2 Documentation

A Paint is an object used to render graphical elements in the UI, similar to Brushes in WPF or AvaloniaUI. LiveCharts2 uses a wrapper around SkiaSharp's Paint that adds features like animations and a more developer-friendly API.

You can assign a paint to various properties to control rendering:

• Series: Fill and Stroke properties.
• Axes: DataLabelsPaint and SeparatorPaint properties.

Setting a paint to null is valid and means the visual will be ignored or not drawn.

LiveCharts2 is composed of three main modules that work together to render charts:

• Core: Defines the API for shapes and generates the geometries and sizes required for a chart.
• Renderer: Consumes the Core API to materialize geometries into images using SkiaSharp.
• View: The UI component that coordinates between the Core (asking what to draw) and the Renderer (asking how to draw it).

Animations are handled by the Core using IAnimatable objects and MotionProperty definitions. When a property is set, it schedules a value over a timeline rather than applying it instantly.

LiveCharts2 can render charts as images without requiring a UI framework (like WPF, WinForms, or MAUI). This is useful for server-side image generation or console applications. To use this capability, you must install the LiveChartsCore.SkiaSharpView NuGet package.

If you are already using LiveCharts to render UI controls in a framework like WPF or WinForms, you already have this dependency and do not need to install it again.

To build images in a console application:

1. Create a new Console Application in Visual Studio 2022.
2. Select .NET 6.0 as the target framework (LiveCharts2 also supports .NET 5.0, .NET Core 3.1, or .NET Framework 4.6.2 or greater).
3. Install the LiveChartsCore.SkiaSharpView package.
4. Use the SkiaSharp-based rendering logic in your Program.cs to generate images of charts such as CartesianChart, PieChart, or GeoMap.

The GeoMap control renders vectorized maps using GeoJSON files. To create a heat map, use HeatLandSeries and provide a collection of HeatLand objects. Each HeatLand requires a Name (which corresponds to the shortName property in your GeoJSON file) and a Value.

// Example for XAML/Blazor/WinForms logic
public HeatLandSeries[] Series { get; set; } = new HeatLandSeries[]
{
    new HeatLandSeries
    {
        Lands = new HeatLand[]
        {
            new HeatLand { Name = "bra", Value = 13 },
            new HeatLand { Name = "mex", Value = 10 },
            new HeatLand { Name = "usa", Value = 15 }
        }
    }
};

If the default tooltip styling is insufficient, you have two main options:

1. Inherit from SKDefaultTooltip: Override specific parts of the default SkiaSharp tooltip to change its behavior or appearance (e.g., drawing custom geometry based on the active point).
2. Implement IChartTooltip: Create a tooltip from scratch. You can use the LiveCharts API to draw within control bounds or use your specific UI framework's native tooltip capabilities. Any class implementing IChartTooltip can be used as a tooltip.

When using FinancialPoint with a DateTime axis, you should configure the Axis to handle time intervals correctly using UnitWidth. This ensures the spacing between points reflects the actual time elapsed (e.g., days).

To set the unit width to days, use TimeSpan.FromDays(1).Ticks.

XAxes = new[]
{
    new Axis
    {
        LabelsRotation = 15,
        Labeler = value => new DateTime((long)value).ToString("yyyy MMM dd"),
        // set the unit width of the axis to "days"
        UnitWidth = TimeSpan.FromDays(1).Ticks
    }
};