Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps

Jollen Moyani - Jun 30 '23 - - Dev Community

Welcome to our Chart of the Week series.

This blog will use the Syncfusion .NET 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, 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

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.

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; }
 }
Enter fullscreen mode Exit fullscreen mode

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; }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configuring Syncfusion .NET MAUI Cartesian Charts

Then, let’s configure the Syncfusion .NET MAUI Cartesian Charts control by referring to this documentation.

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>
Enter fullscreen mode Exit fullscreen mode

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 instance. We’ll create separate column series for each app.

Configuring the chart series involves specifying the ItemSource property with the AppRevenues property, XBindingPath to indicate the purchase year, and YbindingPath 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}"/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

We can customize the legend using the ItemTemplate 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>
Enter fullscreen mode Exit fullscreen mode

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 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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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}"/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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.

Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the purchase revenue using Syncfusion’s .NET MAUI multiple-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, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
CRYPTOCURRENCY SCAM / FRAUD TRACING & RECOVERY

webdev
Image
The Art of Storytelling with Your Banner Stand Design

stands, banner
Image
A Glimpse Into Best Crypto Online Casino's Secrets Of Best Crypto Online Casino
Image
JavaScript Essentials: Part 6 (Mastermind in Javascript)

javascript, beginners, api, node
Image
Level Up Your React Skills: Understanding and Using Hooks

react, javascript, webdev, programming
Image
Sustainability in Marketing: Eco-Friendly Retractable Banner Stands

retractable, stands, banner
Image
From Human to Machine

ai, machinelearning, cybersecurity
Image
Introduction to Time Complexity - Big O Notation
Image
Cat Flap Fitters Near Me
Image
10 ADHD Assessment Cost-Related ADHD Assessment Cost-Related Projects That Will Stretch Your Creativity
Image
BCrypt::Errors::InvalidHash (invalid hash)

ruby, rails, webdev
Image
AWS India customers can now setup automated recurring payments on their cards

aws, payments, awsindia, recurring
Image
🔍 Integrating AWS OpenSearch in a Next.js App

nextjs, aws, javascript, webdev
Image
10 Places Where You Can Find Car Keys Lost Replacement
Image
10 Things You Learned In Kindergarden To Help You Get Started With Lost Car Key
Image
From Rising Star to Icon: Bella Hadid's Evolution Through the Years
Image
Why You Should Focus On Making Improvements To Spare Car Key Cut
Image
Adding a Composite Door Cat Flap
Image
detect blocking calls using BlockHound in Spring Webflux

springboot, blockhound, java, springwebflux
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .