~/piechart/overview.md

The Pie Chart Control

This article is a quick guide to use the PieChart control, you can explore all the properties and the source code at the ApiExplorer.

The PieChart control can build Pie, Doughnut and gauges charts, this article will cover only Pie and Doughnut charts, if you need to know more about gauges please read this guide.

<PieChart
    Series="series">
</PieChart>
private ISeries[] series = = new ISeries[]
{
    new PieSeries<double> { Values = new double[] { 2 } },
    new PieSeries<double> { Values = new double[] { 4 } },
    new PieSeries<double> { Values = new double[] { 1 } },
    new PieSeries<double> { Values = new double[] { 4 } },
    new PieSeries<double> { Values = new double[] { 3 } }
};

image

InitialRotation property

Controls the angle in degrees where the first slice is drawn, the InitialRotation property will change the start angle of the pie, the following diagram explains where the PieChart rotation starts:

image

<PieChart
    InitialRotation="-90">
</PieChart>

Notice a change in the InitialRotation property is animated automatically based on the chart animations settings:

image

MaxAngle property

This property determines the complete angle in degrees of the chart, the default value is 360.

<PieChart
    MaxAngle="270">
</PieChart>

Notice the MaxAngle property is animated automatically based on the chart animations settings:

image

AnimationsSpeed property

This section uses the CartesianChart control, but it works the same in the PieChartControl control.

Defines the animations speed of all the chart elements (axes, series, sections).

<lvc:CartesianChart
    Series="{Binding Series}"
    AnimationsSpeed="speed"> <!-- mark -->
</lvc:CartesianChart>
private TimeSpan speed = TimeSpan.FromMilliseconds(500);

EasingFunction property

This section uses the CartesianChart control, but it works the same in the PieChartControl control.

This property defines the way the shapes in the chart animate, in other words it controls the way the IMotionProperties of all the chart elements (axes, series, sections) in the chart move from a state 'A' to state 'B'.

The property is of type Func<float, float>, it means that it is a function that takes a float argument (the time elapsed from 0 to 1), and returns float value as the result (the progress of the animation from 0 to 1), you can learn more about easing curves at this article.

<lvc:CartesianChart
    Series="{Binding Series}"
    AnimationsSpeed="speed"
    EasingFunction=""> <!-- mark -->
</lvc:CartesianChart>
private Func<float, float> easing = LiveChartsCore.EasingFunctions.BounceOut; // mark

Now the chart will animate following the BounceOut curve.

image

Now try the LiveChartsCore.EasingFunctions.Lineal function, it will animate things lineally as the time elapses.

image

Finally you can also build your own function:

<lvc:CartesianChart
    Series="{Binding Series}"
    AnimationsSpeed="speed"
    EasingFunction="easing"> <!-- mark -->
</lvc:CartesianChart>
private Func<float, float> easing = time => time * time; // mark

The library also provides some builders based on d3-ease easing curves, the builders.

Func easingCurve = LiveChartsCore.EasingFunctions.BuildCustomBackOut(0.8f);
Func easingCurve = LiveChartsCore.EasingFunctions.BuildCustomElasticOut(0.8f, 1.1f);
// there are more builders, check them out all, they start with Build{ function }({ args })

Disable animations

This section uses the CartesianChart control, but it works the same in the PieChartControl control.

Settings the EasingFunction to null disables animations.

<lvc:CartesianChart
    EasingFunction="null"> <!-- mark -->
</lvc:CartesianChart>

Disabling animations will not improve performance drastically: if you come from LiveCharts 0.x version then maybe you are thinking that disabling animations will improve the performance of the library, in most of the cases that is not true, animations are not the bottle neck in performance in LiveCharts 2.x, normally you must need to clean your code somewhere else, not here, plus we put a lot of effort building the animations of the library, please just do not disable them 😭, instead try to make them run faster, animating data visualization normally brings an excellent user experience.

DrawMargin property

This section uses the CartesianChart control, but it works the same in the PieChartControl control.

Defines the distance from the axes (or edge of the chart if there is no axis) to the draw margin area.

<lvc:CartesianChart
    Series="{Binding Series}"
    AnimationsSpeed="speed"
    DrawMargin="margin"> <!-- mark -->
</lvc:CartesianChart>
// Notice the constructor of the Margin class has multiple overloads
// https://lvcharts.com/api/2.0.0-beta.330/LiveChartsCore.Measure.Margin
private LiveChartsCore.Measure.Margin margin = new LiveChartsCore.Measure.Margin(100); // mark

image

Tooltips

This section uses the CartesianChart control, but it works the same in the PieChartControl control.

Tooltips are popups that help the user to read a chart as the pointer moves.

This is a brief sample about how to use the main features of the IChartTooltip<T> interface, you can find a more detailed article at the button below or at the API explorer.

Go to the full tooltips article

tooltips

You can place a tooltip at Top, Bottom, Left, Right, Center or Hidden positions, for now tooltips for the PieChart class only support the Center position, default value is Top.

Notice the Hidden position will disable tooltips in a chart.

<CartesianChart
    Series="series"
    TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Top"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Bottom"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Left"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Right"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Center"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Hidden"><!-- mark -->
</CartesianChart>

Legends

This section uses the CartesianChart control, but it works the same in the PieChartControl control.

A legend is a visual element that displays a list with the name, stroke and fills of the series in a chart:

This is a brief sample about how to use the main features of the IChartLegend<T> interface, you can find a more detailed article at the button below or at the API explorer.

Go to the full legends article

legends

You can place a legend at Top, Bottom, Left, Right or Hidden positions, notice the Hidden position will disable legends in a chart, default value is Hidden.

<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Top"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Bottom"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Left"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Right"><!-- mark -->
</CartesianChart>
<CartesianChart
    Series="series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Hidden"><!-- mark -->
</CartesianChart>