Skip to main content

CategoryChart

Definition

public class CategoryChart : SeriesChart<CategorySeries, MultiSeriesLegend>

Properties

NameTypeDescriptionDefault
SeriesICollection<CategorySeries>Gets or sets the series to drawnull
CategorySeparationdoubleGets or sets the spacing between the categories8d
ItemSeparationdoubleGets or sets the spacing between the series2d
CategoryLabelsIEnumerable<string>Gets or sets the name of the categoriesnull
CategoryComparerIComparer<string>Gets or sets the comparer to order the categories when drawingnull
DisplayLabelsOnTopboolIf true, chart will show labels on top of canvastrue
DisplayValuesboolIf true, chart will show values opposite to labels; only if there is one seriesfalse
ValueLabelFontColorColorGets or Sets the color of the values shown opposite to the labels; only if there is one seriesColors.Black
GridDashPatternDoubleCollectionGets or sets the pattern of the grid lines[6, 6]
AxisFontSizedoubleGets or Sets the axis font size11d
AxisFontMargindoubleGets or Sets the axis font margin5d
AxisFontColorColorGets or Sets the axis font colorColors.Black
AxisFontFamilyIFontGets or Sets the axis font familyFont.Default
AxisLinesColorColorGets or Sets the axis lines colorColors.LightGray
AxisLinesStrokeSizedoubleGets or Sets the axis lines stroke size0.9d
DisplayValuesGridLinesboolIf true values grid lines will be drawnfalse
DisplayReferenceGridLinesboolIf true references grid lines will be drawnfalse
DisplayValuesAxisboolIf true reference axis will be drawntrue
DisplayReferenceAxisboolIf true values axis will be drawntrue
MaxValuedouble?Gets or Sets the maximum value that will be drawnnull
MinValuedouble?Gets or Sets the minimum value that will be drawnnull
ReferenceValueFormatterFunc<double, string>Gets or sets the formater for referencesnull
ReferenceCountintGets or sets the amount of references that should be drown3

CategoryLabels

By default, the categories used to draw are taken from the series's ItemsSource (using the LabelPath property). This behavior is shown in this example, in which the categories are loaded from the Label property present in the Item class.

As an alternative method to set the categories of the chart, the CategoryChart has the CategoryLabels property. A string collection can be passed and will be used as categories. In case there are also LabelPath in the series they will be merged together.

The ViewModel is used to illustrate how to use the CategoryLabels property.

ViewModel

public class ViewModel {
public ObservableCollection<Item> AppSpentWithLabels { get; private set; } = new ObservableCollection<Item>()
{
{ new Item { FirstValue = 80, SecondValue = 30, Label = "Aug" } },
{ new Item { FirstValue = 50, SecondValue = 120, Label = "Jul" } },
{ new Item { FirstValue = 60, SecondValue = 75, Label = "Jun" } },
{ new Item { FirstValue = 100, SecondValue = 115, Label = "May" } },
{ new Item { FirstValue = 50, SecondValue = 80, Label = "Apr" } },
{ new Item { FirstValue = 90, SecondValue = 110, Label = "Mar" } },
{ new Item { FirstValue = 60, SecondValue = 110, Label = "Feb" } },
{ new Item { FirstValue = 100, SecondValue = 140, Label = "Jan" } },
};

public ObservableCollection<List<int>> AppSpent { get; private set; } = new ObservableCollection<List<int>>()
{
{ new List<int> { 100, 60, 90, 50, 100, 60, 50, 80 } },
{ new List<int> { 140, 110, 110, 80, 115, 75, 120, 30 } }
};

public ObservableCollection<string> AppSpentLabels { get; private set; } = new ObservableCollection<string>()
{
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"
};
}

This ViewModel has two collections of data that are going to be used to draw the charts. The AppSpentWithLabels collection has the values and labels. The AppSpent collection contains two lists with values only.

Xaml

<!--  APP SPENT WITH LABELS  -->
<grial:CategoryChart
AxisLinesColor="#F1F1F2"
CategoryLabels="{ Binding AppSpentLabels }"
HeightRequest="300"
ItemSeparation="10">

<grial:LineSeries
Title="Marketing"
CurveFactor="0"
IsStacked="False"
LabelPath="Label"
ValuePath="FirstValue"
ItemsSource="{ Binding AppSpentWithLabels }"
Color="#1A65C9" />

<grial:LineSeries
Title="Uncategorized"
CurveFactor="0"
IsStacked="False"
LabelPath="Label"
ValuePath="SecondValue"
ItemsSource="{ Binding AppSpentWithLabels }"
Color="#F98600" />

</grial:CategoryChart>

In this example the CategoryChart has the CategoryLabels property bound to the AppSpentLabels property of the ViewModel, and the ValuePath and LabelPath properties of the series set to their corresponding path to the property in the model used.

The result produced by this Xaml will be that the categories are presented honoring the order of the IEnumerable<string> passed to the CategoryLabels property, and if any new label is found in the data it will be added at the end.

Result

AppSpentWithoutLabels example

If we want to use only values, ItemsSource property can receive a collection of numbers and again, they will be presented honoring the order of CategoryLabels.

Xaml

<!--  APP SPENT  -->
<grial:CategoryChart
AxisLinesColor="#F1F1F2"
CategoryLabels="{ Binding AppSpentLabels }"
DisplayReferenceAxis="True"
HeightRequest="300"
ItemSeparation="10">

<grial:LineSeries
Title="Marketing"
CurveFactor="0"
ItemsSource="{ Binding AppSpent[0] }"
Color="#1A65C9" />

<grial:LineSeries
Title="Uncategorized"
CurveFactor="0"
ItemsSource="{ Binding AppSpent[1] }"
Color="#F98600" />

</grial:CategoryChart>

This example produces the same output of the previous example. Here the ItemsSource properties are bound to de lists of integers of the ViewModel.

Important

If the ItemsSource property is bound to a collection of numbers, LabelPath and ValuePath must not be set.

Drawing without Labels

If drawing labels is not necessary, both the LabelPath and the CategoryLabels can be omitted.

<!--  APP SPENT WITHOUT LABELS  -->
<grial:CategoryChart
AxisLinesColor="#F1F1F2"
HeightRequest="300"
ItemSeparation="10">

<grial:LineSeries
Title="Marketing"
CurveFactor="0"
ItemsSource="{ Binding AppSpent[0] }"
Color="#1A65C9" />

<grial:LineSeries
Title="Uncategorized"
CurveFactor="0"
ItemsSource="{ Binding AppSpent[1] }"
Color="#F98600" />

</grial:CategoryChart>

Result

AppSpentWithoutLabels example

CategorySeries

Definition

public abstract class CategorySeries : ChartSeries

Properties

NameTypeDescriptionDefault
TitlestringGets or sets the title of the series to use when drawing the legendstring.Empty
ColorColorGets or sets the color of the seriesnull
ColorOpacitydoubleSets the Alpha modifier value to use when drawing series color. Value must be within 0 and 11d
IsStackedboolGets or sets if data will be displayed in the same column or notfalse

BarSeries

Definition

public class BarSeries : CategorySeries

Properties

NameTypeDescriptionDefault
ShowBackgroundBarboolIf true chart will draw background bars and value bars. If not only value bars will be drawntrue
BackgroundBarColorColorGets or sets the background color to use when drawing each barColors.RoyalBlue
BackgroundBarOpacitydoubleGets or sets the alpha of the background color to use when drawing each bar0.1d
CornerRadiusdoubleGets or Sets the top left and top right corner radius of the bar0d
SelectedColorColorGets or sets the color for the selected barColors.Black

LineSeries

Definition

public class LineSeries : CategorySeries

Properties

NameTypeDescriptionDefault
CurveFactordoubleSets how 'curvy' the line will be when drawn. Accepts values between 0 and 10.6d
AreaBrushBrushGets or Sets the brush to use when drawing area of linenull
DisplayPointsboolIf set to true points will be drawntrue
PointSizedoubleGets or Sets the radius for each point5d
SelectedPointSizedoubleGets or Sets the radius for the selected point8d
FillPointsboolGets or Sets wether to fill the point or nottrue
LineStrokeSizedoubleGets or Sets the size of the line2.5d
LineDashPatternDoubleCollectionGets or Sets the pattern of the linenull
IsExpandedboolGets or Sets the line series will expand, if there are only LineSeries in the Series property of the charttrue

See Also