Gauges
You can also create gauges with the PieChart
control, the library provides the GaugeBuilder
class,
it is a helper class that build a collection of PieSeries<ObservableValue>
based on the properties
we specify, take a look at the following sample.
GaugeTotal = 100; // 100 is the max value for this gauge.
Series = new GaugeBuilder()
.WithLabelsSize(50)
.WithInnerRadius(50)
.WithBackgroundInnerRadius(50)
.AddValue(30)
.BuildSeries();
<PieChart
Series="Series"
Total="GaugeTotal">
</PieChart>
InitialRotation property
You could also use the PieChart.InitialRotation
property to customize the angle where the gauge starts.
InitialRotation = -90; // -90 degrees for the starting angle // mark
GaugeTotal = 100;
Series = new GaugeBuilder()
.WithLabelsSize(50)
.WithInnerRadius(50)
.WithBackgroundInnerRadius(50)
.AddValue(30)
.BuildSeries();
<PieChart
Series="Series"
Total="GaugeTotal"
InitialRotation="InitialRotation"> <!-- mark -->
</PieChart>
OffsetRadius property
Now trying the GaugeBuilder.OffsetRadius
, this property defines an offset in pixels from the InnerRadius
of the
pie slice shape to the actual start of the shape:
InitialRotation = -90;
GaugeTotal = 100;
Series = new GaugeBuilder()
.WithLabelsSize(50)
.WithInnerRadius(50)
.WithBackgroundInnerRadius(50)
.WithOffsetRadius(10) // mark
.AddValue(30)
.BuildSeries();
Notice that there is a similar property the GaugeBuilder.BackgroundOffsetRadius
will do the same effect
but in the background slice (gray one).
Multiple series
You can also compare multiple series in the same gauge, the following sample combines adds 2 more series and
uses the LabelFormatter
property to customize the labels.
InitialRotation = 45;
GaugeTotal = 100;
Series = new GaugeBuilder()
.WithLabelsPosition(PolarLabelsPosition.Start)
.WithLabelFormatter(point => point.PrimaryValue + " " + point.Context.Series.Name)
.WithLabelsSize(20)
.WithInnerRadius(20)
.WithOffsetRadius(8)
.WithBackgroundInnerRadius(20)
.AddValue(30, "Vannesa") // mark
.AddValue(50, "Charles") // mark
.AddValue(90, "Ana") // mark
.BuildSeries();
MaxAngle property
The max angle property defines the maximum angle the gauge can take, the range goes from 0 to 360 degrees (full circle),
by default the value is 360, we can avoid the overlap of the green series in the previous sample if we reserve a space for
the labels, in this case we will set the MaxAngle
to 270 degrees, this way we will have space for the labels to render
in the last 90 degrees of our circumference.
InitialRotation = 45;
GaugeTotal = 100;
Series = new GaugeBuilder()
.WithLabelsPosition(PolarLabelsPosition.Start)
.WithLabelFormatter(point => point.PrimaryValue + " " + point.Context.Series.Name)
.WithLabelsSize(20)
.WithInnerRadius(20)
.WithOffsetRadius(8)
.WithBackgroundInnerRadius(20)
.AddValue(30, "Vannesa")
.AddValue(50, "Charles")
.AddValue(90, "Ana")
.BuildSeries();
<PieChart
Series="Series"
Total="GaugeTotal"
InitialRotation="InitialRotation"
MaxAngle="270"> <!-- mark -->
</PieChart>