Chart of the Week: Creating .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures
Tags: charts, dotnetmaui, development, mobile
Published: 2023-07-13 12:31:10

---
title: Chart of the Week: Creating .NET MAUI Area Chart for US Tech Companies Adopting Dual-Class Voting Structures
published: true
date: 2023-07-13 10:49:18 UTC
tags: charts, dotnetmaui, development, mobile
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-area-chart-visualize-us-companies-adopting-dual-class-voting.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5sp37s3m0mg90s358r6.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 ".NET 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 "Initial Public Offerings: Dual Class Structure of IPOs Through 2022") 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.

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

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

```xml
<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 "Getting Started with .NET MAUI Charts").

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

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

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

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

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

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

```xml
<!--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.
<figure>

  <img src="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" alt="Visualizing US tech and non-tech companies that have adopted dual-class voting systems using .NET MAUI area charts" style="width:100%">

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

</figure>

## 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 "Creating a Area Chart for the US Tech Companies Adopting Dual Class Voting Structures GitHub demo") 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 ".NET 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 "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 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 "Blog: Introducing the New .NET MAUI Numeric Entry Control")
- [Introducing the New .NET MAUI Image Editor Control](https://www.syncfusion.com/blogs/post/dotnet-maui-image-editor-control.aspx "Blog: Introducing the New .NET MAUI Image Editor Control")
- [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 "Blog: Chart of the Week: Creating a .NET MAUI Multiple-Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps")
- [Introducing the .NET MAUI Toolbox for Visual Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-visual-studio-toolbox.aspx "Blog: Introducing the .NET MAUI Toolbox for Visual Studio")