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 } }
};
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:
<PieChart
InitialRotation="-90">
</PieChart>
Notice a change in the InitialRotation
property is animated automatically based on the chart animations settings:
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:
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.
Now try the LiveChartsCore.EasingFunctions.Lineal
function, it will animate things lineally as the time elapses.
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://livecharts.dev/api/2.0.0-rc2/LiveChartsCore.Measure.Margin
private LiveChartsCore.Measure.Margin margin = new LiveChartsCore.Measure.Margin(100); // mark
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.
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.
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>