---
title: "Chart of the Week: Creating a .NET MAUI Bar Chart to Visualize Type 1 Diabetes Prevalence"
published_at: "2024-01-25T11:46:18+00:00"
modified_at: "2026-01-15T08:34:30+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-bar-chart-diabetes"
excerpt: "This blog explains how to create a .NET MAUI Bar Chart to analyze the prevalence of Type 1 Diabetes across countries."
taxonomy_category:
  - ".NET MAUI"
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "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 Bar Chart to Visualize Type 1 Diabetes Prevalence

[Saiyath Ali Fathima M](https://www.syncfusion.com/blogs/author/saiyathalifathimabee-moidhinabdhulkathar)

![Chart of the Week: Creating a .NET MAUI Bar Chart to Visualize Type 1 Diabetes Prevalence](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Chart-of-the-Week-Creating-a-.NET-MAUI-Bar-Chart-to-Visualize-Type-1-Diabetes-Prevalence.png)


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

Today, we’ll focus on a growing health concern—diabetes. Diabetes is a chronic condition that affects how a person’s body uses glucose and regulates blood sugar. It can lead to serious health complications over time, impacting the heart, blood vessels, eyes, kidneys, and nerves. One specific type of diabetes is type 1 diabetes, where a person is born with an immune system that attacks the insulin-producing cells in the pancreas, hindering the production of the insulin hormone that regulates blood sugar.

In our analysis, we’ll create a bar chart to compare the prevalence of type 1 diabetes across various countries. To achieve this, we’ll be leveraging the powerful features of the [Syncfusion .NET MAUI bar chart](https://help.syncfusion.com/maui/cartesian-charts/barchart)
 control.

Now, let’s look at the chart that illustrates our data.

![Visualizing Type 1 Diabetes prevalence using .NET MAUI Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Visualizing-Type-1-Diabetes-prevalence-using-.NET-MAUI-Bar-Chart.png)Let’s explore the step-by-step process of creating a bar chart (sometimes called a transposed column chart) to visualize the prevalence of type 1 diabetes in several countries.

## Step 1: Gather data

Before we dive into chart creation, the first step is gathering data. In our case, we’ve utilized the [International Diabetes Foundation Report](https://diabetesatlas.org/idfawp/resource-files/2022/12/IDF-T1D-Index-Report.pdf)
, a comprehensive source for type 1 diabetes prevalence data. This data will serve as the foundation for the bar chart.

## Step 2: Populate the data for the chart

Define the **DiabetesModel** class, incorporating essential properties such as ** Country**, ** Value**, ** AgeCategory**, and ** Count**, to store data on diabetes.

Refer to the following code example.

```
public class DiabetesModel
{
    public string Country { get; set; }
    public double Value { get; set; }
    public string AgeCategory {  get; set; }
    public double Count {  get; set; }
    public DiabetesModel(string country, double value)
     {
          Country = country;
          Value = value;
     }
    //It is used to store the distribution by age of type 1 diabetes in the U.S.
     public DiabetesModel(double count, string ageCategory)
     {
          Count = count;
          AgeCategory = ageCategory;
     }
}
```

Generate a data collection using the **DiabetesData** class, specifically the ** Data** property, to illustrate the prevalence of type 1 diabetes.

Refer to the following code example.

```
public class DiabetesData
{
   public ObservableCollection<DiabetesModel> Data { get; set; }
   public DiabetesData()
   {
        Data = new ObservableCollection<DiabetesModel>()
        {
                new DiabetesModel("U.S", 1447298),
                new DiabetesModel("India", 860423),
                new DiabetesModel("Brazil", 588800),
                new DiabetesModel("China", 448480),
                new DiabetesModel("Germany", 431313),
                new DiabetesModel("UK", 413042),
                new DiabetesModel("Russia", 336901),
                new DiabetesModel("Canada", 285324),
        };
   }
}
```

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

Let’s configure the Syncfusion .NET MAUI Cartesian Charts control using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started)
.

A bar chart uses bars (columns) to represent data points and compare values across different categories. To render a bar chart, first, initialize the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1)
 and switch the chart’s x- and y-axes by setting the [IsTransposed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_IsTransposedProperty)
 property to **true.**

Then, create a column chart. To render a column chart, create an instance of [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1)
 and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series)
 collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1)
 (discussed in the next step).

Refer to the following code example.

```
<chart:SfCartesianChart IsTransposed="True">
 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis />
 </chart:SfCartesianChart.XAxes>
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis />
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
```

## Step 4: Bind the diabetes data to the Bar Chart

Now, bind the collected data on the prevalence of type 1 diabetes in various countries for the year 2022 to the Bar Chart.

Refer to the following code example.

```
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Country" YBindingPath="Value">
</chart:ColumnSeries>
```

In the previous code example, we bound the **Data** with the ** ItemsSource**property. The ** XBindingPath** and ** YBindingPath** properties are bound to the ** Country** and ** Value** properties, respectively.

## Step 5: Personalize the chart’s appearance

Now, let’s add some style to our chart to make it visually appealing and easy to understand.

### Incorporating the chart title

Adding a chart title enhances the clarity of the presented data. Refer to the following code example.

```
<chart:SfCartesianChart.Title>
 <Grid Margin="0,0,0,10">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="13"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <StackLayout Grid.RowSpan="2" Margin="0,8,0,6" Orientation="Vertical" BackgroundColor="#008FFB" />
  <StackLayout Grid.Column="1" Margin="5,0,0,0" HorizontalOptions="Start" Orientation="Vertical">
   <Label Text="Who Has Type 1 Diabetes?" FontSize="Large" FontAttributes="Bold" TextColor="#666666"/>
   <Label Text="Estimated number of people with type 1 diabetes, by country" FontSize="17" TextColor="Gray"/>
  </StackLayout>
 </Grid>
</chart:SfCartesianChart.Title>
```

### Customizing the chart axis

To customize the chart axis, you can use the following properties:

- **ShowMajorGridLines**: To customize the visibility of the major grid lines.
- **LabelStyle**: To customize the style of the axis labels.
- **AxisLineStyle**: To customize the style of the axis line.
- **MajorTickStyle**: To customize the style of the major tick lines.
- **IsVisible**: To customize the visibility of the axis.

Refer to the following code example.

```
<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=10, iOS=10, Default=13.5}"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis IsVisible="False" ShowMajorGridLines="False"/>
</chart:SfCartesianChart.YAxes>
```

### Personalizing the series width, corner radius, and color

To enhance the appearance of the series, you can customize the **Width**, ** CornerRadius**, and ** Color**properties. Refer to the following code example.

```
<chart:ColumnSeries CornerRadius="0,15,0,15" Width="{OnPlatform WinUI=0.6,MacCatalyst=0.6}" Fill="#008FFB">
</chart:ColumnSeries>
```

### Adding the data label

To enhance the readability of the data, you can enable the chart data labels using the [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html?tabs=tabid-9%2Ctabid-11%2Ctabid-5%2Ctabid-7%2Ctabid-18%2Ctabid-1%2Ctabid-16%2Ctabid-20%2Ctabid-14%2Ctabid-13%2Ctabid-3#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels)
 property.

```
<chart:ColumnSeries ShowDataLabels="True">
 
 <chart:ColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle LabelFormat="###,###" FontSize="{OnPlatform Android=10.5 , iOS=10.5 , Default=14}" TextColor="White"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:ColumnSeries.DataLabelSettings>
 
</chart:ColumnSeries>
```

### Incorporating plot area background view

As the prevalence of type 1 diabetes is higher in the United States than in other countries, we aim to enhance the informativeness of our Bar Chart. Let’s integrate a plot area background view that visually represents the distribution of type 1 diabetes by age in the U.S.

Refer to the following code example.

```
<chart:SfCartesianChart.PlotAreaBackgroundView>
    <AbsoluteLayout>
        <Border AbsoluteLayout.LayoutBounds="{OnPlatform WinUI='0.9,0.3,-1,-1',Android='1,-1,320,200', iOS='1,0,320,200', MacCatalyst='0.9,0.3,350,-1'}" AbsoluteLayout.LayoutFlags="PositionProportional" StrokeThickness="1.5" Stroke="#0e385d" StrokeShape="RoundRectangle 10" Margin="10">
            <chart:SfCircularChart>
                <chart:SfCircularChart.Title>
                    <Label Text="Age distribution in the US" FontSize="16" FontFamily="Verdana" HorizontalTextAlignment="Center" Padding="0,5,0,0" TextColor="#666666"/>
                </chart:SfCircularChart.Title>
                <chart:SfCircularChart.Legend>
                    <chart:ChartLegend Placement="Bottom"/>
                </chart:SfCircularChart.Legend>
                <chart:DoughnutSeries ItemsSource="{Binding USDetails}" XBindingPath="AgeCategory" YBindingPath="Count" InnerRadius="{OnPlatform Default=0.5,Android=0.6,iOS=0.6}" Radius="{OnPlatform Default=0.8,Android=1,iOS=1}" ShowDataLabels="True" PaletteBrushes="{Binding CustomBrushes}">
                    <chart:DoughnutSeries.DataLabelSettings>
                        <chart:CircularDataLabelSettings LabelPlacement="Inner" UseSeriesPalette="False">
                            <chart:CircularDataLabelSettings.LabelStyle>
                                <chart:ChartDataLabelStyle LabelFormat="0'%" FontSize="{OnPlatform Android=9,iOS=9, Default=13}" TextColor="White"/>
                            </chart:CircularDataLabelSettings.LabelStyle>
                        </chart:CircularDataLabelSettings>
                    </chart:DoughnutSeries.DataLabelSettings>
                    <chart:DoughnutSeries.CenterView>
                        <Grid Margin="-10,0,0,0">
                            <Path Data="{StaticResource PathData1}" Fill="#0d5e9b"/>
                            <Path Data="{StaticResource PathData2}" Fill="#E3465D"/>
                            <Path Data="{StaticResource PathData3}" Fill="#0d5e9b"/>
                            <Path Data="{StaticResource PathData4}" Fill="#0d5e9b"/>
                        </Grid>
                    </chart:DoughnutSeries.CenterView>
                </chart:DoughnutSeries>
            </chart:SfCircularChart>
        </Border>
    </AbsoluteLayout>
</chart:SfCartesianChart.PlotAreaBackgroundView>
```

To create the **USDetails** and ** CustomBrushes** properties in the ** DiabetesData** class, follow these steps:

1. Navigate to the **DiabetesData** class.
2. Add a new property called **USDetails** to store the distribution of type 1 diabetes by age in the U.S.
3. Add another new property called **CustomBrushes** to store the collection of brushes for applying a doughnut chart, which is a child of the plot area background view.

Refer to the following code example. In it, we visualize the prevalence of type 1 diabetes in the U.S. across various age groups using the [Syncfusion Doughnut Chart](https://www.syncfusion.com/maui-controls/maui-circular-charts/chart-types/maui-doughnut-chart)
. In this chart, the legend displays the age categories along with the chart segments’ different colors.

```
public class DiabetesData
{
      public ObservableCollection<DiabetesModel> USDetails { get; set; }
      public ObservableCollection<Brush> CustomBrushes { get; set; }
      public DiabetesData()
      {
          USDetails = new ObservableCollection<DiabetesModel>()
          {
                new DiabetesModel(170408,"<20 years"),
                new DiabetesModel(880937,"20 - 59 years"),
                new DiabetesModel(397447,">= 60 years"),
          };
          CustomBrushes = new ObservableCollection<Brush>()
          {
              new SolidColorBrush(Color.FromArgb("#086ec5")),
              new SolidColorBrush(Color.FromArgb("#0d5e9b")),
              new SolidColorBrush(Color.FromArgb("#0e385d")),
          };
          CalculatePercentage(USDetails);
      }
      static void CalculatePercentage(ObservableCollection<DiabetesModel> data)
      {
          // Calculate the total sum of all values.
          double total = data.Sum(item => item.Count);
          // Calculate the percentage for each item and store it in the Count property.
          foreach (var item in data)
          {
              item.Count = (item.Count / total) * 100;
          }
       }
}
```

After executing the previous code examples, the output will look like the following image.

![Visualizing Type 1 Diabetes prevalence using .NET MAUI Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Visualizing-Type-1-Diabetes-prevalence-using-.NET-MAUI-Bar-Chart.png)

Visualizing Type 1 Diabetes prevalence using .NET MAUI Bar Chart

## GitHub reference

For more details, refer to the complete project on the [GitHub repository](https://github.com/SyncfusionExamples/Creating-a-bar-chart-to-analyze-the-prevalence-of-Type-1-Diabetes-by-country)
.


## Conclusion

Thanks for reading! In this blog, we explored how to visualize data on the prevalence of type 1 diabetes in several countries for the year 2022 using the Syncfusion [.NET MAUI Bar Chart](https://help.syncfusion.com/maui/cartesian-charts/barchart)
. With this, we can understand the variations, and it can contribute to our knowledge of health patterns worldwide. We encourage you to follow the steps in this blog and share your feedback in the comments section below.

Current customers can download the latest version of Essential Studio® from the [License and Downloads](https://www.syncfusion.com/account/login)
 page. If you are not yet a Syncfusion customer, feel free to try our [30-day free trial](https://www.syncfusion.com/downloads)
 to experience all our features.

For questions, you can contact us via 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 eager to help you!

## Related blogs

- [Chart of the Week: Creating a .NET MAUI Multiple Fast Line Chart to Analyze the Impact of Exported Goods on GDP](https://www.syncfusion.com/blogs/post/maui-fastline-chart-export-vs-gdp.aspx)
- [Chart of the Week: Creating a .NET MAUI Stacked Column Chart for Global Smartphone Shipments](https://www.syncfusion.com/blogs/post/maui-stacked-column-chart-phone.aspx)
- [Chart of the Week: Creating a .NET MAUI Scatter Chart to Visualize CO2 Emissions vs. Fossil Fuel Consumption](https://www.syncfusion.com/blogs/post/maui-scatter-chart-co2-vs-fuel.aspx)
- [Introducing the New .NET MAUI PullToRefresh Control](https://www.syncfusion.com/blogs/post/dotnet-maui-pull-to-refresh.aspx)