Chart of the Week: Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown
Tags: dotnetmaui, chart, maui, desktop
Published: 2024-07-08 16:07:31

---
title: Chart of the Week: Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown
published: true
date: 2024-07-03 13:27:25 UTC
tags: dotnetmaui, chart, maui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-radial-bar-apple-revenue
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxk2c8nkghgttksz3ieq.jpeg
---
**TL;DR:** Let’s visualize Apple’s revenue distribution data across different products using Syncfusion .NET MAUI Radial Bar Chart. We’ll use advanced customization options for a superior data visualization experience. Read the article for complete details!

Welcome to our **Chart of the Week Blog** series!

Today, we’ll visualize the data on Apple’s revenue breakdown for 2022 by creating a stunning [Radial Bar Chart](https://www.syncfusion.com/maui-controls/maui-circular-charts/chart-types/maui-radial-bar-chart ".NET MAUI Radial Bar Chart") with a customized [center view](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_CenterView "CenterView property of Radial Bar Charts") using the [Syncfusion .NET MAUI Circular Charts control](https://www.syncfusion.com/maui-controls/maui-circular-charts ".NET MAUI Circular Charts").

## Why use Radial Bar Chart?

A [Radial Bar Chart](https://youtu.be/KO7LfFuIwHE "YouTube video: How to customize the .NET MAUI Radial Bar Chart?") is a doughnut chart representing each segment as a separate circle. This versatile chart type can be used in various scenarios to visualize categorical data in a circular format. Here are a few everyday use cases of it:

- Sales performance
- Market share analysis
- Survey results
- Performance metrics

Imagine you’re a financial analyst looking to present complex revenue data in a visually appealing way. You need a chart that not only showcases the contributions of different product categories like iPhones, Macs, and Services but also has a stunning design. The [Radial Bar Chart](https://help.syncfusion.com/maui/circular-charts/radialbarchart "Radial Bar Chart in .NET MAUI Chart") is ideal for this purpose. It transforms detailed revenue breakdowns into an easy-to-understand and captivating visual, making data interpretation straightforward and efficient.

## **Center view customization**

The .NET MAUI Radial Bar Chart offers extensive customization options; the [center view](https://help.syncfusion.com/maui/circular-charts/radialbarchart#centerview "Center view customization in .NET MAUI Radial Bar Chart") is one such powerful feature. This feature allows you to add any view or key statistics to the center of the Radial Bar Chart, making it a valuable area for sharing additional information about the chart.

In this blog, we will visualize Apple’s revenue for 2022, placing an Apple icon and the total revenue in the center view. This central element not only adds a visual appeal but also provides a quick snapshot of the overall data.

Refer to the following image.

![Visualizing Apple’s revenue data using Syncfusion .NET MAUI Radial Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Visualizing-Apples-revenue-data-using-Syncfusion-.NET-MAUI-Radial-Bar-Chart.gif)

We’ll also explore other chart features such as the chart title, color palettes, series customization, legend, and interactive features like tooltips for further customization.

Let’s get started!

## Step 1: Gathering data from the source

First, we need to gather the revenue data for different product categories from a reliable source. For this example, we are using Apple’s revenue data for the year 2022 from [Apple’s annual report( page 40)](https://s2.q4cdn.com/470004039/files/doc_financials/2022/q4/_10-K-2022-(As-Filed).pdf "Apple's annual report").

## Step 2: Preparing the data for the chart 

Create a **Model** to represent the revenue data for each product category. Refer to the following code example.

```csharp
public class Model
{
    public string Category { get; set; }
    public double Revenue { get; set; }
    public string CategoryImage { get; set; }
    public SolidColorBrush Color { get; set; }

    public Model(string category, double revenue, string categoryImage, SolidColorBrush color)
    {
        Category = category;
        Revenue = revenue;
        CategoryImage = categoryImage + ".png";
        Color = color;
    }
}
```

Next, create a **ViewModel** to hold the collection of revenue data.

```csharp
public class ViewModel
{
    public ObservableCollection<Model> RadialBarData { get; set; }

    public ViewModel()
    {
        var colors = new string[]
        {
            "#0B77E3",
            "#1D5B6F",
            "#BD34B7",
            "#DE7207",
            "#8E4AFC"
        };

        RadialBarData = new ObservableCollection<Model>()
        {
            new Model("Services", 78129, "service", CreateBrush(colors[0])),
            new Model("Wearables", 41241, "earphone", CreateBrush(colors[1])),
            new Model("iPad", 29292, "ipad", CreateBrush(colors[2])),
            new Model("Mac", 40177, "mac", CreateBrush(colors[3])),
            new Model("iPhone", 205489, "iphone", CreateBrush(colors[4]))
        };

    }

    private SolidColorBrush CreateBrush(string hexColor)
    {
        return new SolidColorBrush(Color.FromArgb(hexColor));
    }
}
```

## Step 3: Configure the Syncfusion .NET MAUI Circular Charts

Let’s configure the Syncfusion [.NET MAUI Circular Charts control](https://www.syncfusion.com/maui-controls/maui-circular-charts ".NET MAUI Circular Charts control") using this [documentation](https://help.syncfusion.com/maui/circular-charts/getting-started "Getting started with .NET MAUI Circular Charts").

Refer to the following code example.

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage ….
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">

  <chart:SfCircularChart>
    …
  </chart:SfCircularChart>
</ContentPage>
```

## Step 4: Binding data to the chart

To design the Radial Bar Chart, we’ll use the Syncfusion [RadialBarSeries ](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html "RadialBarSeries class of .NET MAUI Circular Charts")instances. Make sure to configure the **ViewModel** class to bind its properties to the chart’s **BindingContext**.

Refer to the following code example. Here, in the **RadialBarSeries** , the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource "ItemsSource property of .NET MAUI Charts"), [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath "XBindingPath property of .NET MAUI Charts"), and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath "YBindingPath property of .NET MAUI Charts") properties are bound to the **RadialBarData** , **Category** , and **Revenue** properties, respectively.

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage ….
   xmlns:local="clr-namespace:AppleRevenueRadialBarChart">

   <chart:SfCircularChart>

     <chart:SfCircularChart.BindingContext>
        <local:ViewModel x:Name="viewModel"/>
     </chart:SfCircularChart.BindingContext>

     <chart:RadialBarSeries ItemsSource="{Binding RadialBarData}" 
                            YBindingPath="Revenue" XBindingPath="Category" >

     </chart:SfCircularChart>

</ContentPage>
```

## Step 5: Customizing the Syncfusion .NET MAUI Radial Bar Chart

Let’s enhance the aesthetics and readability of the .NET MAUI Radial Bar Chart by customizing its elements such as title, series, interaction features, center view, and legends.

### Chart title: Setting the stage

With the Syncfusion .NET MAUI Radial Bar Chart, adding a [title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title "Title property of .NET MAUI Charts") is simple and intuitive. The title provides quick information about the data being plotted in the chart.

Refer to the following code example to add a title to the chart.

```xml
<chart:SfCircularChart.Title>
    <HorizontalStackLayout>
        <Image Source="revenue1.png" WidthRequest="{OnPlatform Default='50', iOS='40', MacCatalyst='70'}"/>
        <VerticalStackLayout>
            <Label Text="Apple's Revenue Breakdown for FY 2022" Margin="5,0,0,0" 
                   HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" 
                   VerticalOptions="CenterAndExpand" 
                   FontSize="{OnPlatform Default='25', iOS='22', MacCatalyst='28'}" FontAttributes="Bold" />
            <Label Text="Revenue growth rate calculated by product category" Margin="5,0,0,0" 
                   HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" 
                   VerticalOptions="CenterAndExpand" 
                   FontSize="{OnPlatform WinUI='14', Android='12', iOS='14', MacCatalyst='18'}" 
                   TextColor="Gray"/>
        </VerticalStackLayout>
    </HorizontalStackLayout>
</chart:SfCircularChart.Title>
```

### Center view: Highlighting key information

The [center view](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_CenterView "CenterView property of .NET MAUI Charts") helps us to share additional information about the Radial Bar Chart. Here, we’re going to add the total revenue generated by Apple in 2022, which is $394.3B in the center view.

```xml
<chart:RadialBarSeries.CenterView>
    <VerticalStackLayout Margin="{OnPlatform WinUI='0, -20, 0, 0', Default='0, -10, 0, 0'}" >
        <Image HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand" Source="apple.png" 
               HeightRequest="{OnPlatform iOS=70, Android=70, WinUI=85, MacCatalyst=120}" 
               WidthRequest="{OnPlatform iOS=70, Android=70, WinUI=100, MacCatalyst=120}" />
        <VerticalStackLayout Margin="{OnPlatform WinUI='0, -10, 0, 0', Default='0, -10, 0, 0'}" >
            <Label Text="Total revenue" FontSize="{OnPlatform Android=12, iOS=14, WinUI=12, MacCatalyst=18}" 
                   HorizontalOptions="Center" VerticalOptions="Center" />
            <Label Text="$394.3B" FontSize="{OnPlatform Android=14, iOS=18, WinUI=16, MacCatalyst=22}" 
                   FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center" />
        </VerticalStackLayout>
    </VerticalStackLayout>
</chart:RadialBarSeries.CenterView>
```

### Palette: Making data pop with colors

We can customize the [palette](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes "PaletteBrushes property of .NET MAUI Charts") to apply distinct colors for each category, making it easier to differentiate between them. Each segment of the radial bar represents a product category, with unique colors assigned to Services, Wearables, iPad, Mac, and iPhone. Color coding helps in quick visual identification and comparison of categories.

**XAML**

```xml
<chart:RadialBarSeries PaletteBrushes="{Binding Palette}">
```

**C#**

```csharp
public class ViewModel
{
    public ObservableCollection<Brush> Palette { get; set; }

    public ViewModel()
    {
        var colors = new string[]
        {
            …
        };

        Palette = new ObservableCollection<Brush>(colors.Select(CreateBrush));
    }
}
```

### Customizing the series appearance

Let’s customize the chart’s series appearance to suit our data presentation needs.

- The [CapStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_CapStyle "CapStyle property of .NET MAUI Charts") property adds smooth curves to the start and end of each bar.
- The [Radius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_Radius "Radius property of .NET MAUI Charts") property changes the radial bar chart size.
- The [MaximumValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_MaximumValue "MaximumValue property of .NET MAUI Charts") represents the span of the segment-filled area in the radial bar track.
- The [GapRatio](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_GapRatio "GapRatio property of .NET MAUI Charts") defines the space between each segment.
- The [TrackFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_TrackFill "TrackFill property of .NET MAUI Charts") property customizes the circular bar area behind the radial bar segments.

By leveraging these properties, a visually stunning and highly customizable Radial Bar Chart can be created to communicate data insights effectively.

Refer to the following code example.

```xml
<chart:RadialBarSeries CapStyle="BothCurve"
                       Radius="{OnPlatform Android=1, iOS=1, Default=0.8}"
                       MaximumValue="218000" 
                       GapRatio="0.4" 
                       TrackFill="#E7E0EC">
```

### Legend: A quick reference guide

The [legends](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend "Legend property of .NET MAUI Charts") provide information about the data points being displayed in the chart. They list all categories with their respective icons, making it easy to interpret the data briefly without needing to hover over each segment.

Refer to the following code example.

```xml
<chart:SfCircularChart>
    <chart:SfCircularChart.Resources>
        <local:BrushToColorConverter x:Key="brushToColor" />
        <local:BillionConverter x:Key="billionConverter" />

        <DataTemplate x:Key="LegendTemplate">
            <Grid ColumnDefinitions="Auto,Auto" Margin="{OnPlatform Android='0, -5, 0, 10', Default='20, 0, 0, 0'}">
                <Image Grid.Column="0" Source="{Binding Item.CategoryImage}" 
                       WidthRequest="{OnPlatform Default='35', iOS='40', MacCatalyst='50'}" 
                       HeightRequest="{OnPlatform Default='35', iOS='40', MacCatalyst='50'}" />
                <VerticalStackLayout Grid.Column="1">
                    <Label FontSize="{OnPlatform Default='13', iOS='16', MacCatalyst='18'}" 
                           VerticalTextAlignment="Center" Text="{Binding Item.Category}" 
                           TextColor="{Binding IconBrush, Converter={StaticResource brushToColor}}" 
                           Margin="0,2,0,0" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
                    <Label FontSize="{OnPlatform Default='13', iOS='16', MacCatalyst='18'}" 
                           VerticalTextAlignment="Center" 
                           Text="{Binding Item.Revenue, Converter={StaticResource billionConverter}}" 
                           TextColor="{Binding IconBrush, Converter={StaticResource brushToColor}}" 
                           Margin="0,2,0,0" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
                </VerticalStackLayout>
            </Grid>
        </DataTemplate>
    </chart:SfCircularChart.Resources>

    <chart:SfCircularChart.Legend>
        <chart:ChartLegend Placement="{OnPlatform Android=Right, iOS=Right, Default=Bottom}" 
                           ItemTemplate="{StaticResource LegendTemplate}"/>
    </chart:SfCircularChart.Legend>

    <chart:RadialBarSeries LegendIcon="Circle">

    </chart:RadialBarSeries>
</chart:SfCircularChart>
```

### Tooltip: Adding interactivity

We can enhance the chart’s interactivity with [tooltips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip "EnableTooltip property of .NET MAUI Charts") that provide detailed information when a user hovers over or taps on a segment. In this chart, the tooltip shows the category name and its percentage contribution to the total revenue. This interactivity makes the chart more engaging and informative.

Refer to the following code example.

```xml
<chart:SfCircularChart>
    <chart:SfCircularChart.Resources>
        <local:PercentageConverter x:Key="percentageConverter" />

        <DataTemplate x:Key="tooltipTemplate">
            <StackLayout Orientation="Vertical" VerticalOptions="Center" Margin="{OnPlatform MacCatalyst='3'}">
                <HorizontalStackLayout HorizontalOptions="Center">
                    <Ellipse WidthRequest="{OnPlatform Default=10, MacCatalyst=15}" 
                             HeightRequest="{OnPlatform Default=10, MacCatalyst=15}" 
                             Stroke="White" StrokeThickness="2"
                             Background="{Binding Item.Color, Converter={StaticResource brushToColor}}" 
                             HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Text="{Binding Item.Category, StringFormat=' {0}'}" 
                           TextColor="White" FontAttributes="Bold" 
                           FontSize="{OnPlatform Default='12', Android='10', iOS='10', MacCatalyst='18'}"
                           HorizontalOptions="Center" VerticalOptions="Center"/>
                </HorizontalStackLayout>
                <BoxView HeightRequest="{OnPlatform Default=0.5, MacCatalyst=1}" Color="White"/>
                <HorizontalStackLayout>
                    <Label Text="Revenue:" TextColor="White" FontAttributes="Bold" 
                           FontSize="{OnPlatform Default='12', Android='10', iOS='10', MacCatalyst='18'}"
                           HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label TextColor="White" FontAttributes="Bold" 
                           Text="{Binding Item.Revenue, StringFormat=' {0}', Converter={StaticResource percentageConverter}}"
                           FontSize="{OnPlatform Default='12', Android='10', iOS='10', MacCatalyst='18'}"
                           HorizontalOptions="Center" VerticalOptions="Center"/>
                </HorizontalStackLayout>
            </StackLayout>
        </DataTemplate>
    </chart:SfCircularChart.Resources>

    <chart:SfCircularChart.TooltipBehavior>
        <chart:ChartTooltipBehavior />
    </chart:SfCircularChart.TooltipBehavior>

    <chart:RadialBarSeries EnableTooltip="True" TooltipTemplate="{StaticResource tooltipTemplate}">

    </chart:RadialBarSeries>
</chart:SfCircularChart>
```

After executing these code examples, we will get the output that resembles the following image. 

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Visualizing-Apples-revenue-data-using-Syncfusion-.NET-MAUI-Radial-Bar-Chart-control.gif" alt="Visualizing Apple’s revenue data using Syncfusion .NET MAUI Radial Bar Chart" style="width:100%">

  <figcaption>Visualizing Apple’s revenue data using Syncfusion .NET MAUI Radial Bar Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to the demo on [GitHub](https://github.com/SyncfusionExamples/Creating-the-.NET-MAUI-Radial-Bar-Chart-with-Customized-Center-View "Visualizing Apple’s revenue data using Syncfusion .NET MAUI Radial Bar Chart GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize Apple’s revenue data using the Syncfusion .NET MAUI Radial Bar Chart. We strongly encourage you to follow the steps outlined in this blog, share your thoughts in the comments below, and implement these features in your own projects to create impactful data visualizations.

The existing customers can download the new version of Essential Studio on the [License and Downloads](https://www.syncfusion.com/account "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get the free 30-day evaluation of Essential Studio products") to check out our incredible features. 

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Export .NET MAUI DataGrid to Specific PDF Page](https://www.syncfusion.com/blogs/post/export-maui-grid-to-specific-pdf-page "Blog: Easily Export .NET MAUI DataGrid to Specific PDF Page")
- [Introducing the New .NET MAUI Digital Gauge Control](https://www.syncfusion.com/blogs/post/dotnetmaui-digital-gauge-control "Blog: Introducing the New .NET MAUI Digital Gauge Control")
- [Chart of the Week: Creating a .NET MAUI Doughnut Chart to Visualize the World’s Biggest Oil Producers](https://www.syncfusion.com/blogs/post/maui-doughnut-chart-oil-producers "Blog: Chart of the Week: Creating a .NET MAUI Doughnut Chart to Visualize the World’s Biggest Oil Producers")
- [Introducing the 12th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/syncfusion-dotnet-maui-2024-volume-2 "Blog: Introducing the 12th Set of New .NET MAUI Controls and Features")