Bar Chart in .NET MAUI Chart

7 Jun 20243 minutes to read

A bar chart uses bars to represent data points and compare values across different categories. To render bar chart, initialize the SfCartesianChart and switch the chart X and Y axes by using the IsTransposed property as true. Then, create the column chart. To render a column chart, create an instance of ColumnSeries, and add it to the Series collection property of SfCartesianChart.

NOTE

By default, IsTransposed property of the SfCartesianChart is false.

NOTE

The cartesian chart has Series as its default content.

<chart:SfCartesianChart x:Name="chart" IsTransposed="True">

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis />
    </chart:SfCartesianChart.YAxes>   

    <chart:ColumnSeries ItemsSource="{Binding Data}"
                        XBindingPath="XValue"
                        YBindingPath="YValue"/>

</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
chart.IsTransposed = true;
CategoryAxis primaryAxis = new CategoryAxis();
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
};

chart.Series.Add(series);
this.Content = chart;

Bar chart type in MAUI Chart

Spacing and Width

The Spacing property of the ColumnSeries is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively.

The Width property of the ColumnSeries is used to change the width of the rectangle. The default value of the width is 0.8, and the value ranges from 0 to 1.

<chart:SfCartesianChart x:Name="chart" IsTransposed="True">

    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis />
    </chart:SfCartesianChart.YAxes>  

    <chart:ColumnSeries ItemsSource="{Binding Data}"
                        XBindingPath="XValue"
                        YBindingPath="YValue"
                        Spacing="0.3"
                        Width="0.5"/>

</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
chart.IsTransposed = true;
CategoryAxis primaryAxis = new CategoryAxis();
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    Spacing = 0.3,
    Width = 0.5
};

chart.Series.Add(series);
this.Content = chart;

Bar segment spacing in MAUI Chart