Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI
Tags: dotnetmaui, chart, mobile, productivity
Published: 2024-03-28 10:03:28

---
title: Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI
published: true
date: 2024-03-27 13:07:56 UTC
tags: dotnetmaui, chart, mobile, productivity
canonical_url: https://www.syncfusion.com/blogs/post/maui-column-chart-investment-in-ai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuwjakcp329msffkzpuu.png
---

**TLDR:** Gathering and binding the data on the corporates’ investment in AI over the years and visualizing the data using the Syncfusion .NET MAUI Column Chart. We’ll also customize the chart’s title, axis, series, background view, and other elements for better readability.

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

[Artificial intelligence (AI)](https://en.wikipedia.org/wiki/Artificial_intelligence "Wikipedia article: Artificial intelligence (AI)") has recently emerged as a critical area for corporate funding, with businesses across diverse sectors recognizing its capacity to revolutionize their operations. The allure of AI investments lies in their ability to enhance productivity, drive innovation, and secure a competitive advantage.

The year **2021** is notable for AI investment, as the sector has received a record-breaking **$276.1 billion** in funding. This surge in financial backing reflects a growing confidence in AI’s ability to catalyze innovation, elevate efficiency, and transform industries on a global scale.

The following image demonstrates the chart that we intend to construct. ![Visualizing the corporates’ investments in AI data using the Syncfusion .NET MAUI Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Visualizing-the-corporates-investments-in-AI-data-using-the-Syncfusion-.NET-MAUI-Column-Chart.png)

Let’s delve into the steps to visualize corporates’ AI investment data using the Syncfusion [.NET MAUI Column Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-column-chart ".NET MAUI Column Chart").

## Step 1: Gathering the data on AI investment

Before proceeding, we should gather the data for the chart. Here, we’ll refer to the [Stanford University analysis](https://aiindex.stanford.edu/wp-content/uploads/2023/04/HAI_AI-Index-Report_2023.pdf "Article: Artificial Intelligence Index Report 2023"), which provides comprehensive information on corporate investment in AI and extract data from it. Specifically, we examined the page number 184.

## Step 2: Populate the data for the chart

Define the **ArtificialIntelligenceModel** class with the following properties:

- **Year** – To represent the year of investment.
- **Value** – To hold the invested amount in U.S. billion dollars.

Refer to the following code example.

```csharp
public class ArtificialIntelligenceModel
  {
      public string Year { get; set; }
      public double Value { get; set; }

      public ArtificialIntelligenceModel(string year, double value)
      {
          Year = year;
          Value = value;
      }
  }
```

Now, generate the data collection that illustrates the investment details using the **ArtificialIntelligenceData** class with the **Data** property.

```csharp
public class ArtificialIntelligenceData
  {
      public List<ArtificialIntelligenceModel> Data { get; set; }

      public ArtificialIntelligenceData()
      {
          Data = new List<ArtificialIntelligenceModel>()
           {
              new ArtificialIntelligenceModel("2022",189.59),
              new ArtificialIntelligenceModel("2021",276.14),
              new ArtificialIntelligenceModel("2020",146.74),
              new ArtificialIntelligenceModel("2019",95.57),
              new ArtificialIntelligenceModel("2018",79.62),
              new ArtificialIntelligenceModel("2017",53.72),
              new ArtificialIntelligenceModel("2016",33.83),
              new ArtificialIntelligenceModel("2015",25.43),
              new ArtificialIntelligenceModel("2014",19.04),
              new ArtificialIntelligenceModel("2013",14.57),
          };
      }
  }
```

## 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 "Getting started with the .NET MAUI Cartesian Charts control").

Refer to the following code example.

```xml
<chart:SfCartesianChart>
      

 <chart:SfCartesianChart.XAxes>
  <model:CategoryAxisExt>
  </model:CategoryAxisExt>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <model:NumericalAxisExt>
  </model:NumericalAxisExt>
 </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>
```

### Step 4: Bind the investment data to the .NET MAUI Column Chart

Then, create a [Column Chart](https://help.syncfusion.com/maui/cartesian-charts/column "Getting started with the .NET MAUI Column Chart") to display the AI investment data for different years. The following code example demonstrates how to bind the collected data to our chart.

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

Here, we’ve bound the **Data** to the **ItemsSource** property. The **XBindingPath** and **YBindingPath** properties are bound to the **Year** and **Value** properties, respectively. 

## Step 5: Customize the chart appearance

Let’s customize the appearance of the .NET MAUI Column Chart for better visualization. 

### Adding the chart title

Adding a title to the Chart improves the data’s readability. Refer to the following code example.

```xml
<chart:SfCartesianChart.Title>
 <Grid>

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

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

  <Image Grid.Column="0" Grid.RowSpan="2" Source="technology.png" Margin="0,-25,0,20" HeightRequest="100" WidthRequest="{OnPlatform Android=40,iOS=40, Default=50}"/>

  <StackLayout Grid.Row="0" Grid.Column="1" Margin="5,0,0,0" HorizontalOptions="Start" Orientation="Vertical">
   <Label Text="Decoding AI Investments: A Closer Look at Company Spending" FontSize="24" FontAttributes="Bold" TextColor="#666666" FontFamily="AntaRegular"/>
   <Label Text="Total global corporate investment in artificial intelligence (in billions of U.S. dollars)" FontSize="{OnPlatform Android=14,iOS=14, Default=17}" TextColor="Gray" Margin="0,2,0,0" FontFamily="AntaRegular"/>
  </StackLayout>
  
  <StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Margin="15,-15,0,0" >
   <Rectangle HeightRequest="15" WidthRequest="40" RadiusX="5" RadiusY="5" Fill="#0DAA97" />
   <Label Text="< 50" FontSize="15" Margin="7,13,0,0" />
   <Rectangle HeightRequest="15" WidthRequest="40" RadiusX="5" RadiusY="5" Fill="#9455FC" Margin="10,0,0,0" />
   <Label Text="< 100" Margin="7,13,0,0" FontSize="15"/>
   <Rectangle HeightRequest="15" WidthRequest="40" RadiusX="5" RadiusY="5" Fill="#EA8D03" Margin="10,0,0,0" />
   <Label Text="> 100" Margin="7,13,0,0" FontSize="15"/>
  </StackLayout>
 
 </Grid>
</chart:SfCartesianChart.Title>
```

### Customizing the chart axis

Here, we will enhance the appearance of the axis line by initializing the chart axis in the code behind. Refer to the following code example.

**C#**

```csharp
public class CategoryAxisExt : CategoryAxis
{
}

public class NumericalAxisExt : NumericalAxis
{
}
```

In the above code example, we’ve created an extension for the standard **CategoryAxis** with the **CategoryAxisExt** class and **NumericalAxis** with the **NumericalAxisExt** class.

Here, we will replicate the chart’s axes with the arrow mark at the ends. To achieve this, override the **DrawAxisLine** method within the **CategoryAxisExt** and the **NumericalAxisExt** classes. This is a crucial step in customizing the axis line.

```csharp
public class CategoryAxisExt : CategoryAxis
{
   protected override void DrawAxisLine(ICanvas canvas, float x1, float y1, float x2, float y2)
   {
       var path = new PathF();
       path.MoveTo(x1 + 20, y1);
       path.LineTo(x2, y2);

       // Calculate the direction vector of the line.
       float dx = x2 - x1;
       float dy = y2 - y1;

       // Normalize the direction vector.
       float length = (float)Math.Sqrt(dx * dx + dy * dy);
       float nx = dx / length;
       float ny = dy / length;

       // Length of the arrowhead.
       float arrowLength = 15;

       // Calculate points for the arrowhead.
       float arrowPoint1X = x1 + nx * arrowLength + ny * arrowLength / 2;
       float arrowPoint1Y = y1 + ny * arrowLength - nx * arrowLength / 2;
       float arrowPoint2X = x1 + nx * arrowLength - ny * arrowLength / 2;
       float arrowPoint2Y = y1 + ny * arrowLength + nx * arrowLength / 2;

       // Draw lines for the arrowhead.
       path.MoveTo(x1 + 20, y1);
       path.LineTo(arrowPoint1X + 25, arrowPoint1Y - 5);
       path.MoveTo(x1 + 20, y1);
       path.LineTo(arrowPoint2X + 25, arrowPoint2Y + 5);

       canvas.StrokeColor = (new SolidColorBrush(Color.FromArgb("#1D5B6F"))).Color;

       #if ANDROID || IOS
          canvas.StrokeSize = 1;

       #elif MACCATALYST || WINDOWS
          canvas.StrokeSize = 3;

       #endif
          canvas.DrawPath(path);
   }
}

public class NumericalAxisExt : NumericalAxis
{
   protected override void DrawAxisLine(ICanvas canvas, float x1, float y1, float x2, float y2)
   {
       var path = new PathF();
       path.MoveTo(x1, y1 + 20);
       path.LineTo(x2, y2);

       // Calculate the direction vector of the line.
       float dx = x2 - x1;
       float dy = y2 - y1;

       // Normalize the direction vector.
       float length = (float)Math.Sqrt(dx * dx + dy * dy);
       float nx = dx / length;
       float ny = dy / length;

       // Length of the arrowhead.
       float arrowLength = 12;

       // Calculate points for the arrowhead.
       float arrowPoint1X = x1 + nx * arrowLength + ny * arrowLength / 2;
       float arrowPoint1Y = y1 + ny * arrowLength - nx * arrowLength / 2;
       float arrowPoint2X = x1 + nx * arrowLength - ny * arrowLength / 2;
       float arrowPoint2Y = y1 + ny * arrowLength + nx * arrowLength / 2;

       // Draw lines for the arrowhead.
       path.MoveTo(x1, y1 + 20 );
       path.LineTo(arrowPoint1X + 5, arrowPoint1Y + 25);
       path.MoveTo(x1, y1 + 20 );
       path.LineTo(arrowPoint2X - 5, arrowPoint2Y + 25);

       canvas.StrokeColor = (new SolidColorBrush(Color.FromArgb("#1D5B6F"))).Color;

       #if ANDROID || IOS
          canvas.StrokeSize = 1;

       #elif MACCATALYST || WINDOWS
          canvas.StrokeSize = 3;

       #endif
          canvas.DrawPath(path);
   }
}
```

Let’s customize the other elements in the chart axis using the following properties: 

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

**XAML**

```xml
<chart:SfCartesianChart.XAxes>
 <model:CategoryAxisExt IsInversed="True" PlotOffsetStart="40" ShowMajorGridLines="False">
  <chart:CategoryAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0"/>
  </chart:CategoryAxis.MajorTickStyle>
 </model:CategoryAxisExt>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <model:NumericalAxisExt PlotOffsetEnd="60" ShowMajorGridLines="False">
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0"/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle FontSize="1" TextColor="Transparent"/>
  </chart:NumericalAxis.LabelStyle>
 </model:NumericalAxisExt>
</chart:SfCartesianChart.YAxes>
```

### Customizing the series appearance

Let’s enhance the appearance of the chart’s series by customizing the corner radius and column colors.

**XAML**

```xml
<chart:ColumnSeries CornerRadius="10,10,0,0" PaletteBrushes="{Binding CustomBrushes}"></chart:ColumnSeries>
```

**C#**

```csharp
public class ArtificialIntelligenceData
{
    public ObservableCollection<Brush> CustomBrushes { get; set; }

    public ArtificialIntelligenceData()
    {
        CustomBrushes = new ObservableCollection<Brush>();
        foreach (var item in Data)
        {
           if (item.Value < 50)
           {
              // Add the brush for values less than 50.
              CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#0DAA97")));
           }
           else if (item.Value > 50 && item.Value < 100)
           {
              // Add a different brush for values between 50 to 100.
              CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#9455FC")));
           }
           else
           {
              // Add the default brush for values greater than 100.
                  CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#EA8D03")));
           }
        }
    }
}
```

In the code example above, we have specified the column color based on the investment value.

### Adding the data labels

We can make the data easier to read by enabling and customizing the chart data labels.

```xml
<chart:ColumnSeries ShowDataLabels="True">
 <chart:ColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings LabelPlacement="Outer" UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle LabelFormat="#.#" FontSize="13" TextColor="Black"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
```

### Incorporating a plot area background view

Finally, incorporate a plot area background view to make our Column Chart more informative and attractive. With this, we can add any view to the chart plot area to include relevant data.

```xml
<chart:SfCartesianChart.PlotAreaBackgroundView>
 <AbsoluteLayout>
  <Image Source="artificialintelligence.png" 
         AbsoluteLayout.LayoutBounds="0.2,0.4,-1,-1"
         AbsoluteLayout.LayoutFlags="PositionProportional"
         HeightRequest="{OnPlatform Android=75,iOS=75, Default=150}"
         WidthRequest="{OnPlatform Android=75,iOS=75, Default=150}"/>
 </AbsoluteLayout>
</chart:SfCartesianChart.PlotAreaBackgroundView>
```

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

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Visualizing-the-corporates-investments-in-AI-data-using-the-Syncfusion-.NET-MAUI-Column-Chart.png" alt="Visualizing the corporates’ investments in AI data using the Syncfusion .NET MAUI Column Chart" style="width:100%">

  <figcaption>Visualizing the corporates’ investments in AI data using the Syncfusion .NET MAUI Column Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to [Visualizing the Corporates’ investment in AI using .NET MAUI Column Chart GitHub demo](https://github.com/SyncfusionExamples/Creating-a-.NET-MAUI-Column-Chart-to-Visualize-the-Corporate-Investment-in-AI "Visualizing the corporates’ investment in AI using .NET MAUI Column Chart GitHub demo").

## Conclusion

Thank you for reading! In this blog, we have explored how to visualize the data on corporates’ investment in AI using the [Syncfusion .NET MAUI Column Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-column-chart ".NET MAUI Column Chart"). Please follow the steps outlined in this blog and share your feedback in the comments section below. 

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 free evaluation of the Essential Studio products") to check out our incredible features. 

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

- [Streamline Your Progress Navigation with the New .NET MAUI StepProgressBar](https://www.syncfusion.com/blogs/post/dotnet-maui-step-progress-bar "Blog: Streamline Your Progress Navigation with the New .NET MAUI StepProgressBar")
- [Introducing the New .NET MAUI Rotator Control](https://www.syncfusion.com/blogs/post/dotnet-maui-rotator-control "Blog: Introducing the New .NET MAUI Rotator Control")
- [Introducing the New .NET MAUI Radial Menu Control](https://www.syncfusion.com/blogs/post/dotnet-maui-radial-menu-control "Blog: Introducing the New .NET MAUI Radial Menu Control")
- [Easily Fill and Share a PDF Form using .NET MAUI PDF Viewer](https://www.syncfusion.com/blogs/post/fill-share-pdf-forms-maui-pdf-viewer "Blog: Easily Fill and Share a PDF Form using .NET MAUI PDF Viewer")