---
title: "Chart of the Week: Creating .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures"
published_at: "2023-07-13T10:49:18+00:00"
modified_at: "2026-01-15T08:20:38+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-area-chart-visualize-us-companies-adopting-dual-class-voting"
excerpt: "In this blog, we’ll see how US tech companies tend to utilize the dual-class voting structure more frequently than non-tech companies using the Syncfusion .NET MAUI Area 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 .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures

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

![Chart of the Week: Creating .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Chart-of-the-Week-Creating-.NET-MAUI-Area-Chart-for-US-Tech-Companies-Adopting-Dual-Class-Voting-Structures.png)


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

Today, we’ll examine how US tech companies tend to utilize the dual-class voting structure more frequently than non-tech companies using the Syncfusion [.NET MAUI Area Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-area-chart)
 control.

Many corporations are adopting a dual-class voting structure for their initial public offerings (IPOs). The reason for adopting this structure is to allow founders and key stakeholders to retain control over strategic decision-making. By giving themselves shares that allow multiple votes per share, they can maintain significant influence on the direction of the company.

The following image shows the growth of dual-class structures in IPOs in tech and non-tech US companies since 1980.![Area Chart for the US Tech Companies Adopting Dual Class Voting Structures](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Area-Chart-for-the-US-Tech-Companies-Adopting-Dual-Class-Voting-Structures.png)

In this blog, we’ll go through the steps to create multiple area charts that compare dual-class voting structures among US tech and non-tech companies.

## Step 1: Gathering the data

Before proceeding, we need to obtain the data for the percentage of dual-class voting structures in companies from 1980 to 2022. The [University of Florida](https://site.warrington.ufl.edu/ritter/files/IPOs-Dual-Class.pdf)
 provides this data. Save it in a CSV file.

## Step 2: Populating the data for the chart

Let’s create a **DualVotingModel** class with the following properties:

- **Year**: This property contains the year details from 1980 to 2022.
- **TechPercentage**: This property holds the percentage of dual-class voting tech companies in a specific year.
- **NonTechPercentage**: This property holds the percentage of dual-class voting non-tech companies in a specific year.

Refer to the following code example.

```
public class DualVotingModel
 {
    public int Year { get; set; }
    public double TechPercentage { get; set; }
    public double NonTechPercentage { get; set; }

   public DualVotingModel(int year, double techPercentage, double nonTechPercentage)
   {
      Year = year;
      TechPercentage = techPercentage;
      NonTechPercentage = nonTechPercentage;
   }
 }
```

Now, generate the collection of voting percentage details using the **DualClassVotingPercentage** class and its ** VotingPercentage** property. Load the CSV data into the dual-class voting data collection using the ** ReadCSV** method and save it in the ** VotingPercentage** property.

```
public class DualClassVotingPercentage
 {
   public List<DualVotingModel> VotingPercentage { get; set; }

   public DualClassVotingPercentage()
   {
      VotingPercentage = new List<DualVotingModel>(ReadCSV());
   }

   public IEnumerable<DualVotingModel> ReadCSV()
   {
       Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
       Stream inputStream = executingAssembly.GetManifestResourceStream("DualClassVoting.Resources.Raw.dualclassvoting.csv");

       string line;
       List<string> lines = new List<string>();

       using StreamReader reader = new StreamReader(inputStream);
       while ((line = reader.ReadLine()) != null)
       {
           lines.Add(line);
       }

       return lines.Select(line =>
       {
          string[] data = line.Split(',');
          return new DualVotingModel(Convert.ToInt32(data[0]), Convert.ToDouble(data[1]),Convert.ToDouble(data[2]));
       });
   }
 }
```

## Step 3: Defining the grid

To create multiple area charts with the desired view, a grid definition should be assigned in your .NET MAUI project.

Refer to the following code example.

```
<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>

 <Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="*"/>
  <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
</Grid>
```

## Step 4: Configuring 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)
.

```
<Grid>
 <!--Chart 1 -->
  <chart:SfCartesianChart Grid.Row="1" Grid.Column="0">
   <chart:SfCartesianChart.XAxes>
    <chart:NumericalAxis/>
   </chart:SfCartesianChart.XAxes>
   <chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis/>
   </chart:SfCartesianChart.YAxes>
  </chart:SfCartesianChart>

 <!--Chart 2 -->
  <chart:SfCartesianChart Grid.Row="1" Grid.Column="1">
   <chart:SfCartesianChart.XAxes>
    <chart:NumericalAxis/>
   </chart:SfCartesianChart.XAxes>
   <chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis/>
   </chart:SfCartesianChart.YAxes>
  </chart:SfCartesianChart>
</Grid>
```

## Step 5: Binding data to the area charts

Use Syncfusion’s **AreaSeries** instance to bind the data for US tech and non-tech companies adopting dual-class voting structures.

Refer to the following code example.

```
<!--Chart 1 -->
<chart:AreaSeries ItemsSource="{Binding VotingPercentage}" 
                  XBindingPath="Year" 
                  YBindingPath="NonTechPercentage"/>

<!--Chart 2 -->
<chart:AreaSeries ItemsSource="{Binding VotingPercentage}"
                  XBindingPath="Year" 
                  YBindingPath="TechPercentage"/>
```

In the previous example, we’ve created two area charts to display the dual-class voting percentages of non-tech and tech companies over a period of time. The data required for these charts is supplied through the **VotingPercentage** property, which provides a collection of objects with properties such as **Year**, ** NonTechPercentage**, and ** TechPercentage**.

## Step 6: Customizing the chart appearance

We can improve the appearance of the .NET MAUI Area Chart by customizing the axis elements, title area color, and more.

### Customizing the chart title

The chart title has been customized to describe the dual-class voting structure data visualized in the chart. The following code example illustrates how to provide a common title for both charts.

```
<Grid>
 <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Dual Class Structure of IPOs" TextColor="#374151" FontSize="16" HorizontalOptions="Center"/>
 <AbsoluteLayout Grid.Row="2" Grid.ColumnSpan="2" Margin="0,5,0,0">
  <Label Text="NON-TECH" TextColor="#F247CC" FontSize="12" FontAttributes="Bold" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.19,0.2,-1,-1"/>
  <Label Text="% of Dual Class" TextColor="#374151" FontSize="13" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.52,0.2,-1,-1"/>
  <Label Text="TECH" TextColor="#2C9CEE" FontSize="12" FontAttributes="Bold"  AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.81,0.2,-1,-1"/>
 </AbsoluteLayout>
</Grid>
```

### Chart positioning

Positioning the chart is crucial to achieve the desired visual impact and organize the user interface. In this case, we have transposed the chart using the **IsTransposed** property, which swaps the x- and y-axes.

```
<!--Chart 1 -->
 <chart:SfCartesianChart  IsTransposed="True"
 </chart:SfCartesianChart>

<!--Chart 2 -->
 <chart:SfCartesianChart  IsTransposed="True">
 </chart:SfCartesianChart>
```

### Axis customization

We can position and customize the chart axis according to our needs using the axis elements.

The following code example demonstrates how to position the y-axis and show common x-axis labels for both charts.

```
<!--Chart 1 -->
<chart:SfCartesianChart.XAxes>
  <chart:NumericalAxis IsInversed="True" Interval="{OnPlatform Android=10,iOS=10,Default=5}" ShowMajorGridLines="False" PlotOffsetEnd="5" MinorTicksPerInterval="5" ShowMinorGridLines="False">
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Transparent" FontSize="1" Margin="0,0,-5,0"/>      
  </chart:NumericalAxis.LabelStyle>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis IsInversed="True" CrossesAt="{Static x:Double.MaxValue}" 
        PlotOffsetStart="20" Interval="5">
   <chart:NumericalAxis.LabelStyle>
    <chart:ChartAxisLabelStyle LabelFormat="0'%" TextColor="#49454F" FontSize="12"/>
   </chart:NumericalAxis.LabelStyle>
  </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

<!--Chart 2 -->
<chart:SfCartesianChart.XAxes>
  <chart:NumericalAxis IsInversed="True" Interval="{OnPlatform Android=10,iOS=10,Default=5}" PlotOffsetEnd="5" ShowMajorGridLines="False" MinorTicksPerInterval="5" ShowMinorGridLines="False">
   <chart:NumericalAxis.LabelStyle>
    <chart:ChartAxisLabelStyle TextColor="#49454F" FontSize="12"/>
   </chart:NumericalAxis.LabelStyle>
  </chart:NumericalAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis CrossesAt="{Static x:Double.MaxValue}" PlotOffsetEnd="20"       
    Interval="10">
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle LabelFormat="0'%" TextColor="#49454F" FontSize="12"/>
  </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

We can also customize the line style, tick line style, and label style of axis elements as shown in the following code example.

```
<chart:NumericalAxis>
 <chart:NumericalAxis.AxisLineStyle>
  <chart:ChartLineStyle StrokeWidth ="0"/>
 </chart:NumericalAxis.AxisLineStyle>
 <chart:NumericalAxis.MajorGridLineStyle>
  <chart:ChartLineStyle Stroke="#b0b3b8"/>
 </chart:NumericalAxis.MajorGridLineStyle>
 <chart:NumericalAxis.MajorTickStyle>
  <chart:ChartAxisTickStyle Stroke="#b0b3b8"/>
 </chart:NumericalAxis.MajorTickStyle>
 <chart:NumericalAxis.MinorTickStyle>
  <chart:ChartAxisTickStyle Stroke="#b0b3b8"/>
 </chart:NumericalAxis.MinorTickStyle>
</chart:NumericalAxis>
```

### Chart color customization

By assigning fill colors to each chart, we can improve the appearance of the series.

```
<!--Chart 1 -->
<chart:AreaSeries Fill="#F247CC"/>

<!--Chart 2 -->
<chart:AreaSeries Fill="#2C9CEE"/>
```

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

![Visualizing US tech and non-tech companies that have adopted dual-class voting systems using .NET MAUI area charts](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Visualizing-US-tech-and-non-tech-companies-that-have-adopted-dual-class-voting-systems-using-.NET-MAUI-area-cha.png)

Visualizing US tech and non-tech companies that have adopted dual-class voting systems using .NET MAUI area charts

## GitHub reference

For more details, refer to the [demo](https://github.com/SyncfusionExamples/Creating-a-Area-Chart-for-the-US-Tech-Companies-Adopting-Dual-Class-Voting-Structures)
 on GitHub.

## Conclusion

Thanks for reading! In this blog, we have seen how to effectively visualize US tech companies’ growing adoption of dual-class voting structures using the [.NET MAUI Area Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-area-chart)
. We highly encourage you to try the steps outlined in this blog and share your feedback in the comment section below.

You can also contact us via 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 eager to help you!

## Related blogs

- [Introducing the New .NET MAUI Numeric Entry Control](https://www.syncfusion.com/blogs/post/dotnet-maui-numeric-entry.aspx)
- [Introducing the New .NET MAUI Image Editor Control](https://www.syncfusion.com/blogs/post/dotnet-maui-image-editor-control.aspx)
- [Chart of the Week: Creating a .NET MAUI Multiple-Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps](https://www.syncfusion.com/blogs/post/dotnet-maui-multiple-column-chart-visualize-health-app-revenue.aspx)
- [Introducing the .NET MAUI Toolbox for Visual Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-visual-studio-toolbox.aspx)