.NET MAUI Chart Bar Series

The Cartesian Chart visualizes each data point from the Bar Series as a rectangle (or a bar). These rectangles can be displayed either horizontally, or vertically, depending on whether the Categorical Axis is the vertical axis or the horizontal one. When the horizontal axis is categorical, the rectangles are displayed vertically. This means that they display an equal width while their height represents the numerical value of each of the data points. So, when the vertical axis is categorical, the rectangles have equal height, while their width represents the value of the data point.

The Bar Series inherits from the Categorical Series and requires one Categorical Axis and one Numerical Axis.

For more information about the common Categorical Series features that are also applicable to the Bar Series, refer to the article on series features.

Example

The following example shows how to create a Cartesian Chart with Bar Series:

1. Create the needed business objects, for example:

• C#

public class CategoricalData
{
    public object Category { get; set; }
    public double Value { get; set; }
}

2. Create a ViewModel:

• C#

public class CategoricalDataViewModel
{
    public ObservableCollection<CategoricalData> Data { get; set; }

    public CategoricalDataViewModel()
    {
        this.Data = GetCategoricalData();
    }

    private static ObservableCollection<CategoricalData> GetCategoricalData()
    {
        var data = new ObservableCollection<CategoricalData>
        {
            new CategoricalData { Category = "A", Value = 101 },
            new CategoricalData { Category = "B", Value = 45 },
            new CategoricalData { Category = "C", Value = 77 },
            new CategoricalData { Category = "D", Value = 15 },
            new CategoricalData { Category = "E", Value = 56 },
        };
        return data;
    }
}

3. Use the following snippet to declare a Cartesian Chart with a Bar Series in XAML:

• XAML

<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.BindingContext>
        <local:CategoricalDataViewModel />
    </telerik:RadCartesianChart.BindingContext>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis LabelFitMode="MultiLine" />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:NumericalAxis LabelFitMode="MultiLine" />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries ValueBinding="Value"
                        CategoryBinding="Category"
                        ItemsSource="{Binding Data}" />
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

The following image shows how the Bar Series looks: