---
title: "Chart of the Week: Creating a .NET MAUI Multiple-Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps"
published_at: "2023-06-29T11:00:00+00:00"
modified_at: "2026-01-15T08:55:59+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-multiple-column-chart-visualize-health-app-revenue"
excerpt: "In this blog, we’ll analyze the purchase revenue of U.S. e-health and meditation apps using the Syncfusion .NET MAUI column chart."
taxonomy_category:
  - ".NET MAUI"
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "Development"
  - "Mobile"
  - "Syncfusion"
taxonomy_post_tag:
  - ".NET MAUI"
  - "Charts"
  - "desktop"
  - "MAUI"
  - "Mobile"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Chart of the Week: Creating a .NET MAUI Multiple-Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps

[Vimala Thirumalai Kumar](https://www.syncfusion.com/blogs/author/vimala-thirumalai-kumar)

![Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Chart-of-the-Week-Creating-a-.NET-MAUI-Column-Chart-to-Visualize-the-Purchase-Revenue-of-US-E-Health-and-Meditation-Apps.png)


Welcome to our **Chart of the Week** series.

This blog will use the Syncfusion [.NET MAUI Column Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-column-chart)
 to create a multiple-column chart that analyzes and compares data points grouped into subcategories. Multiple-column charts are commonly used in business analytics to compare sales performance across various products or regions. The following column chart compares the revenue growth rates of e-health and meditation apps in the U.S.

According to the [Statista Health Market Insights study](https://www.statista.com/chart/29292/estimated-premium-option-in-app-purchase-revenues-of-ehealth-and-meditation-apps-in-the-us/)
, the COVID-19 pandemic led to higher in-app purchases of medication checkers and meditation apps, generating $1.2 billion in revenue in the United States in 2022. Joanne Kim, the researcher of the study, noted a 200% increase in telehealth app downloads between 2019 and 2020. By 2027, the combined revenue from in-app purchases of mindfulness apps and medication checkers is projected to reach nearly $2 billion.

Refer to the following image.

![Visualizing U.S. E-Health and Meditation App Purchase Revenue Using .NET MAUI Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Visualizing-U.S.-E-Health-and-Meditation-App-Purchase-Revenue-Using-.NET-MAUI-Column-Chart-1.png)

Let’s see the steps to create this purchase revenue graph using the Syncfusion .NET MAUI Column Chart.

## Step 1: Gather purchase revenue data

For this blog, we will use data from the [Statista Health Market Insights study](https://www.statista.com/chart/29292/estimated-premium-option-in-app-purchase-revenues-of-ehealth-and-meditation-apps-in-the-us/)
.

## Step 2: Populate data for the chart

Let’s define the **RevenueDetailModel** class with the ** Year**, ** FertilityAppRevenue**, ** MedicationCheckerAppRevenue**, and ** MeditationAppRevenue** properties to store the purchase year and revenue data. This class will also hold the number of meditation app users in 2022 through the ** MeditationAppUsers** and ** Year** properties.

Refer to the following code example.

```
public class RevenueDetailModel
{
     public RevenueDetailModel(string year, double fertilityApp, double medicationCheckerApp, double meditationApp)
     {
         Year = year;
         FertilityApp = fertilityApp;
         MedicationCheckerApp = medicationCheckerApp;
         MeditationApp = meditationApp;
     }
     
     public RevenueDetailModel(string year, double meditationAppUserPercentage)
     {
         Year = year;
         MeditationAppUserPercentage = meditationAppUserPercentage;
     }
     
     public string Year { get; set; }
     public double FertilityApp { get; set; }
     public double MedicationCheckerApp { get; set; }
     public double MeditationApp { get; set; }
     public double MeditationAppUserPercentage { get; set; }
 }
```

Now, we generate a collection of e-health and meditation app purchase revenue details using the **RevenueDetails** class. Here, we’ll also create a collection to store the number of ** MeditationAppUsers** in 2022.

```
public class RevenueDetails
{
    public RevenueDetails()
    {
        AppRevenues = new List<RevenueDetailModel>();
        MeditationAppUsers = new List<RevenueDetailModel>() ;
        
        AppRevenues.Add(new RevenueDetailModel("2017", 15.3, 201.4, 71.9));
        AppRevenues.Add(new RevenueDetailModel("2022", 35.9, 370.4, 815.8));
        AppRevenues.Add(new RevenueDetailModel("2027*", 52.2, 642.5, 1234));
        
        MeditationAppUsers.Add(new RevenueDetailModel("2022", 28));
    }
    public List<RevenueDetailModel> AppRevenues { get; set; }
    public List<RevenueDetailModel> MeditationAppUsers { get; set; }
}
```

## Step 3: Configuring Syncfusion .NET MAUI Cartesian Charts

Then, let’s configure the Syncfusion .NET MAUI Cartesian Charts control by referring to this [documentation](https://help.syncfusion.com/maui/cartesian-charts/column)
.

Refer to the following code example.

```
<Chart:SfCartesianChart x:Name="chart">
 <Chart:SfCartesianChart.XAxes>
  <Chart:CategoryAxis/>
 </Chart:SfCartesianChart.XAxes>
 <Chart:SfCartesianChart.YAxes>
  <Chart:NumericalAxis/>
 </Chart:SfCartesianChart.YAxes>
</Chart:SfCartesianChart>
```

## Step 4: Binding data to the column chart

To visualize the e-health and meditation app purchase data in our chart, we will utilize the Syncfusion [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1)
 instance. We’ll create separate column series for each app.

Configuring the chart series involves specifying the **ItemSource** property with the ** AppRevenues**property, [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath)
 to indicate the purchase year, and [YbindingPath](https://www.syncfusion.com/blogs/post/role-based-authorization-blazor-file-manager.aspx)
 to represent each app’s revenue in millions.

Refer to the following code example.

```
<Chart:ColumnSeries XBindingPath="Year" YBindingPath="FertilityApp" ItemsSource="{Binding AppRevenues}"/>
<Chart:ColumnSeries XBindingPath="Year" YBindingPath="MedicationCheckerApp" ItemsSource="{Binding AppRevenues}"/>
<Chart:ColumnSeries XBindingPath="Year" YBindingPath="MeditationApp" ItemsSource="{Binding AppRevenues}"/>
```

## Step 5: Customizing the chart appearance

We can enhance the appearance of our chart by including a chart title and legend and customizing the chart’s plot area background view, axis elements, series, etc.

### Adding a chart title

Refer to the following code example to add a title to the chart. This will provide context to the data being plotted.

```
<Chart:SfCartesianChart.Title>
 <Grid Margin="{OnPlatform iOS='-40, 0, 0, 0', MacCatalyst='-5, 0, 0,0'}">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="{OnPlatform Android='13', WinUI='13', iOS='13', MacCatalyst='20'}"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <VerticalStackLayout Background="#FF855FF2" Margin="0, 5" Grid.RowSpan="2"/>
  <VerticalStackLayout Grid.Column="1" Margin="5" >
   <Label Text="The Billion Dollar Breathe In, Breathe Out Routine" 
          HorizontalTextAlignment="Start"
          FontSize="{OnPlatform Android='Title', WinUI='Header', iOS='Title', MacCatalyst='40'}" TextColor="Black"/>
   <Label Text="Estimated in-app purchase revenue of e-health and meditation app in the U.S."
          HorizontalTextAlignment="Start"
          FontSize="{OnPlatform Android='Header', WinUI='Title', iOS='Header', MacCatalyst='30'}"
          TextColor="#FF5E768E"/>
  </VerticalStackLayout>
 </Grid>
</Chart:SfCartesianChart.Title>
```

### Adding a chart legend

The legend contains a list of series in the chart. Enabling the chart legend allows us to identify the corresponding data series in the chart.

```
<Chart:ColumnSeries Label="Contraception/fertility apps"/>
<Chart:ColumnSeries Label="Medication checker apps" />
<Chart:ColumnSeries Label="Meditation apps"/>
```

We can customize the legend using the [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemTemplateProperty)
 property of the **ChartLegend** class.

```
<Chart:SfCartesianChart.Legend>
 <Chart:ChartLegend Placement="Left">
  <Chart:ChartLegend.ItemTemplate>
   <DataTemplate>
    <StackLayout Orientation="Horizontal" Margin="{OnPlatform MacCatalyst='20, 0, 0, 0'}">
     <Rectangle HeightRequest="{OnPlatform MacCatalyst='22', Android='13', WinUI='15', iOS='15'}" WidthRequest="{OnPlatform MacCatalyst='22', Android='13', WinUI='15', iOS='15'}" Fill="{Binding IconBrush}"/>
     <Label Margin="10,0,10,0" VerticalTextAlignment="Center"
            Text="{Binding Item.Label}"
            FontSize="{OnPlatform WinUI='14', Android='10', MacCatalyst='22', iOS='15'}" TextColor="Black"/>
    </StackLayout>
   </DataTemplate>
  </Chart:ChartLegend.ItemTemplate>
 </Chart:ChartLegend>
</Chart:SfCartesianChart.Legend>
```

### Chart’s plot area background view customization

The **SfCartesianChart** allows you to add any view to the chart plot area. In this example, we’ll add a [SfCircularChart](https://help.syncfusion.com/maui/circular-charts/overview)
 to the background of the Cartesian chart.

**XAML**

```
<Chart:SfCartesianChart.PlotAreaBackgroundView>
    <AbsoluteLayout>
        <Grid AbsoluteLayout.LayoutBounds="{OnPlatform Android='0.15, -0.1, 200, 100', WinUI='0.05, 0.25, 250, 100', iOS='0.05, 0.88, 100, 300', MacCatalyst='0.08, 0.2'}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{OnPlatform Android='100', WinUI='100', MacCatalyst='175', iOS='100'}"/>
                <ColumnDefinition Width="{OnPlatform Android='150', WinUI='150', MacCatalyst='230', iOS='150'}"/>
            </Grid.ColumnDefinitions>
            <Chart:SfCircularChart>
                <Chart:SfCircularChart.Resources>
                    <ResourceDictionary>
                        <local:CornerRadiusConverter x:Key="innerRadiusConverter"/>
                    </ResourceDictionary>
                </Chart:SfCircularChart.Resources>
                <Chart:RadialBarSeries Radius="1" x:Name="series" InnerRadius="0.7" StartAngle="-90" EndAngle="270" TrackFill="#77FFDB" MaximumValue="100" ItemsSource="{Binding MeditationAppUsers}" XBindingPath="Year" YBindingPath="MeditationAppUserPercentage">
                    <Chart:RadialBarSeries.CenterView>
                        <Border x:Name="border" Stroke="GhostWhite" HeightRequest="{Binding CenterHoleSize}" WidthRequest="{Binding CenterHoleSize}" BackgroundColor="GhostWhite">
                            <Border.StrokeShape>
                                <RoundRectangle BackgroundColor="GhostWhite" CornerRadius="{Binding CenterHoleSize,Converter={StaticResource innerRadiusConverter},Source={x:Reference series}}"/>
                            </Border.StrokeShape>
                            <Border.Shadow>
                                <Shadow Brush="GhostWhite" Opacity="{OnPlatform Android='0.6',iOS='0.6',WinUI='0.5',MacCatalyst='0.5'}" Radius="{OnPlatform Android='20',iOS='20',WinUI='50',MacCatalyst='50'}"/>
                            </Border.Shadow>
                            <StackLayout>
                                <Label Text="28%" FontAttributes="Bold" TextColor="#FF00BFAF" FontSize="17" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" />
                            </StackLayout>
                        </Border>
                    </Chart:RadialBarSeries.CenterView>
                </Chart:RadialBarSeries>
            </Chart:SfCircularChart>
            <Label Text="28% of Americans used a medication checker app in 2022." FontSize="{OnPlatform Android='13', MacCatalyst='22', iOS='13'}" Margin="{OnPlatform Android='0,25,0,0', WinUI='0,15,0,0', MacCatalyst='0, 50, 0, 0', iOS='0, 120, 0, 0'}" Grid.Column="1" />
        </Grid>
    </AbsoluteLayout>
</Chart:SfCartesianChart.PlotAreaBackgroundView>
```

**C#**

```
public class CornerRadiusConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {
            return new CornerRadius((double)value / 2);
        }
        return 0;
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}
```

### Chart axis customization

Refer to the following code example to configure the axes and customize the axis elements.

```
<Chart:SfCartesianChart.XAxes>
 <Chart:CategoryAxis ShowMajorGridLines="False" >
  <Chart:CategoryAxis.AxisLineStyle>
   <Chart:ChartLineStyle StrokeWidth="0"/>
  </Chart:CategoryAxis.AxisLineStyle>
  <Chart:CategoryAxis.MajorTickStyle>
   <Chart:ChartAxisTickStyle StrokeWidth="0"/>
  </Chart:CategoryAxis.MajorTickStyle>
  <Chart:CategoryAxis.LabelStyle>
   <Chart:ChartAxisLabelStyle FontSize="{OnPlatform Android='15', WinUI='20', MacCatalyst='20', iOS='15'}"/>
  </Chart:CategoryAxis.LabelStyle>
 </Chart:CategoryAxis>
</Chart:SfCartesianChart.XAxes>
<Chart:SfCartesianChart.YAxes>
 <Chart:NumericalAxis IsVisible="False" Maximum="{OnPlatform MacCatalyst='1300'}" ShowMajorGridLines="False"/>
</Chart:SfCartesianChart.YAxes>
```

### Chart series customization

Let’s enhance the series’ appearance by assigning different fill colors to each series and enabling data labels for the series segments.

```
<Chart:ColumnSeries ShowDataLabels="True" Fill="#FFF6ACAD" DataLabelSettings="{StaticResource labelSettings}"/>
<Chart:ColumnSeries Spacing="0.1" ShowDataLabels="True" Fill="#FF00BFAF" DataLabelSettings="{StaticResource labelSettings}"/>
<Chart:ColumnSeries ShowDataLabels="True" Fill="#FF855FF2" DataLabelSettings="{StaticResource labelSettings}"/>
```

Refer to the following code example to configure the data labels for each column in the chart with the desired label format.

```
<Grid.Resources>
 <Chart:CartesianDataLabelSettings x:Key="labelSettings" 
                                   LabelPlacement="Outer"
                                   UseSeriesPalette="False">
  <Chart:CartesianDataLabelSettings.LabelStyle>
   <Chart:ChartDataLabelStyle FontSize="{OnPlatform Android='10', WinUI='15', iOS='10', MacCatalyst='15'}"
                              FontAttributes="Bold"
                              LabelFormat="$#,###.0M"/>
  </Chart:CartesianDataLabelSettings.LabelStyle>
 </Chart:CartesianDataLabelSettings>
</Grid.Resources>
```

After executing the previous code examples, we’ll get an output like in the following image.

![Visualizing U.S. E-Health and Meditation App Purchase Revenue Using .NET MAUI Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Visualizing-U.S.-E-Health-and-Meditation-App-Purchase-Revenue-Using-.NET-MAUI-Column-Chart-1.png)

Visualizing U.S. E-Health and Meditation App Purchase Revenue Using .NET MAUI Column Chart

## GitHub reference

For more details, refer to the project on [GitHub](https://github.com/SyncfusionExamples/Creating-a-Multiple-Column-Chart-by-Analyzing-the-Purchase-Revenues-of-eHealth-and-Meditation-Apps)
.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the purchase revenue using Syncfusion’s [.NET MAUI multiple-column chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-column-chart)
. To create a stunning and informative chart, follow these steps and customize it to your needs. Provide your feedback in the comments section below!

You can also reach us through our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are always happy to assist you!

## Related blogs

- [Creating a .NET MAUI Waterfall Chart to Track Monthly Sales](https://www.syncfusion.com/blogs/post/dotnet-maui-waterfall-chart-track-monthly-sales.aspx)
- [Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data](https://www.syncfusion.com/blogs/post/dotnet-maui-column-chart-visualize-yearly-box-office-data.aspx)
- [Creating a .NET MAUI Pie Chart to Illustrate US Methane Emissions in 2021](https://www.syncfusion.com/blogs/post/dotnet-maui-pie-chart-visualize-us-methane-emissions.aspx)
- [Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss](https://www.syncfusion.com/blogs/post/dotnet-maui-inversed-column-chart-visualize-yearly-operating-loss-data.aspx)