# cartesian-chart-bar

> ColumnSeries chart compares Android app downloads for 2015 with transposed bars and data labels.

**Framework:** maui  **Component:** cartesian-chart  **Variant:** bar

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/maui/cartesian-chart-bar.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Maui.Charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/cartesian-chart-bar/Chart.xaml

```xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:model="clr-namespace:MAUI.Controls.CartesianChart.BarChart"
             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             x:Class="MAUI.Controls.CartesianChart.BarChart.BarChartView"
             x:DataType="model:BarChartViewModel">

    <Grid RowDefinitions="*, Auto">

        <chart:SfCartesianChart Grid.Row="0"
                                IsTransposed="True"
                                HorizontalOptions="Fill"
                                VerticalOptions="Fill">

            <chart:SfCartesianChart.Title>
                <Label Text="Popular Android Apps in the Google Play Store - 2015"
                       FontSize="16"
                       HorizontalOptions="Fill"
                       HorizontalTextAlignment="Center" />
            </chart:SfCartesianChart.Title>

            <chart:SfCartesianChart.XAxes>
                <chart:CategoryAxis EdgeLabelsDrawingMode="Shift"
                                     LabelPlacement="BetweenTicks"
                                     ShowMajorGridLines="False" />
            </chart:SfCartesianChart.XAxes>

            <chart:SfCartesianChart.YAxes>
                <chart:NumericalAxis Minimum="0"
                                     Interval="0.5"
                                     IsVisible="False"
                                     EdgeLabelsDrawingMode="Shift"
                                     ShowMajorGridLines="False"
                                     ShowMinorGridLines="False" />
            </chart:SfCartesianChart.YAxes>

            <chart:SfCartesianChart.Series>
                <chart:ColumnSeries Label="Year - 2015"
                                    EnableAnimation="True"
                                    ShowDataLabels="True"
                                    ItemsSource="{Binding BarData}"
                                    XBindingPath="Name"
                                    YBindingPath="Value">
                    <chart:ColumnSeries.DataLabelSettings>
                        <chart:CartesianDataLabelSettings LabelPlacement="Inner">
                            <chart:CartesianDataLabelSettings.LabelStyle>
                                <chart:ChartDataLabelStyle LabelFormat="0.##B" />
                            </chart:CartesianDataLabelSettings.LabelStyle>
                        </chart:CartesianDataLabelSettings>
                    </chart:ColumnSeries.DataLabelSettings>
                </chart:ColumnSeries>
            </chart:SfCartesianChart.Series>
        </chart:SfCartesianChart>

        <HorizontalStackLayout Grid.Row="1" Margin="5,5,0,0">
            <Label Text="Source: " FontSize="12" VerticalOptions="Center" />
            <Label TextColor="#3E8EED"
                   FontSize="12"
                   FontAttributes="Italic"
                   Text=" MUO Tech Publications"
                   VerticalOptions="Center" />
        </HorizontalStackLayout>
    </Grid>
</ContentPage>
```