---
title: "Chart of the Week: Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown"
published_at: "2024-07-03T13:27:25+00:00"
modified_at: "2026-01-09T07:56:21+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-radial-bar-apple-revenue"
excerpt: "This blog explains how to visualize Apple’s revenue breakdown using the Syncfusion .NET MAUI Radial Bar Chart with code examples."
taxonomy_category:
  - ".NET MAUI"
  - "Chart"
  - "Chart of the week"
  - "Syncfusion"
  - "UI"
taxonomy_post_tag:
  - ".NET MAUI"
  - "Chart"
  - "Data Visualization"
  - "desktop"
  - "MAUI"
  - "Mobile Apps"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Chart of the Week: Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown

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

![Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Creating-the-.NET-MAUI-Radial-Bar-to-Visualize-Apples-Revenue-Breakdown.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)
 with a customized [center view](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_CenterView)
 using the [Syncfusion .NET MAUI Circular Charts control](https://www.syncfusion.com/maui-controls/maui-circular-charts)
.

## Why use Radial Bar Chart?

A [Radial Bar Chart](https://youtu.be/KO7LfFuIwHE)
 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)
 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)
 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)
.

## 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.

```
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.

```
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)
 using this [documentation](https://help.syncfusion.com/maui/circular-charts/getting-started)
.

Refer to the following code example.

```
<?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)
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)
, [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath)
, and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath)
 properties are bound to the **RadialBarData**, ** Category**, and ** Revenue** properties, respectively.

```
<?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)
 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.

```
<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)
 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.

```
<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)
 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**

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

**C#**

```
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) 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) 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) 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) defines the space between each segment.
- The [TrackFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RadialBarSeries.html#Syncfusion_Maui_Charts_RadialBarSeries_TrackFill) 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.

```
<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)
 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.

```
<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)
 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.

```
<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.

![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-control.gif)

Visualizing Apple’s revenue data using Syncfusion .NET MAUI Radial Bar Chart


## 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)
.

## 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)
 page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out our incredible features.

You can also contact us through our [support forums](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

- [Easily Export .NET MAUI DataGrid to Specific PDF Page](https://www.syncfusion.com/blogs/post/export-maui-grid-to-specific-pdf-page)
- [Introducing the New .NET MAUI Digital Gauge Control](https://www.syncfusion.com/blogs/post/dotnetmaui-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)
- [Introducing the 12th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/syncfusion-dotnet-maui-2024-volume-2)