Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to Identify Key Customer Complaints
Tags: dotnetmaui, charts, mobile, datavisualization
Published: 2023-09-22 14:49:51

---
title: Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to Identify Key Customer Complaints
published: true
date: 2023-09-22 10:26:19 UTC
tags: dotnetmaui, charts, mobile, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-pareto-chart-for-customer-complaints.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u85n18pd6e3jqqcxxmi.png
---
Welcome to our **Chart of the Week** blog series!

Today, we’ll delve into creating a [Pareto Chart](https://en.wikipedia.org/wiki/Pareto_chart "Wikipedia Link: Pareto chart") to identify key areas of customer complaints using the Syncfusion [.NET MAUI Charts](https://www.syncfusion.com/maui-controls/maui-cartesian-charts "Syncfusion .NET MAUI Charts") control.

Imagine you are the manager of some financial products and have been receiving customer complaints about various issues. You have collected data on the complaints and categorized them into different types over a period. Your goal is to identify the most significant problems to prioritize your improvement efforts. In that case, the Pareto chart comes in handy.

Refer to the following image. ![Pareto Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Pareto-Chart.png)

Let’s see how to build a Pareto chart for customer complaints step by step using [Syncfusion .NET MAUI Charts](https://www.syncfusion.com/maui-controls/maui-cartesian-charts ".NET MAUI Cartesian Charts").

## Step 1: Gathering the customer complaints data

Before creating the chart, we need to gather the [consumer complaints](https://www.kaggle.com/datasets/heemalichaudhari/consumer-complaints "Kaggle Site: Consumer Complaints Article") data from the model source. We need the complaint count in each category.

<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 50%;">
<p>Categories</p>
</td>
<td style="width: 50%;">
<p>Number of Complaints</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Mortgage</p>
</td>
<td style="width: 50%;">
<p>225394</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Debt collection             </p>
</td>
<td style="width: 50%;">
<p>145071</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Credit reporting  </p>
</td>
<td style="width: 50%;">
<p>139929</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Credit card        </p>
</td>
<td style="width: 50%;">
<p>88471</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Bank account or service   </p>
</td>
<td style="width: 50%;">
<p>84643</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Student loan               </p>
</td>
<td style="width: 50%;">
<p>32315</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Consumer Loan</p>
</td>
<td style="width: 50%;">
<p>31411</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Payday loan      </p>
</td>
<td style="width: 50%;">
<p>5523</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Money transfers</p>
</td>
<td style="width: 50%;">
<p>5155</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Prepaid card       </p>
</td>
<td style="width: 50%;">
<p>3774</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Other financial service    </p>
</td>
<td style="width: 50%;">
<p>1031</p>
</td>
</tr>
<tr>
<td style="width: 50%;">
<p>Virtual currency  </p>
</td>
<td style="width: 50%;">
<p>17</p>
</td>
</tr>
</tbody>
</table>

## Step 2: Preparing the data for the chart 

The Pareto chart combines column and line series. Here, we’ll configure the columns to represent the defect count and the lines to denote the cumulative percentage. To achieve this, create separate model classes ( **ComplaintsModel** and **CumulativeModel** ) to hold these values.

Refer to the following code example.

```csharp
public class ComplaintsModel
{
    public string Defect { get; set; }
    public double Frequency { get; set; }
}

public class CumulativeModel
{
    public string Defect { get; set; }

    public double YValues { get; set; }

    public double CumulativeCount { get; set; }

    public double CumulativeFrequency { get; set; }
}
```

Then, generate the data collection in the class **ConsumerComplaintsViewModel** using the **DataValues** property.

```csharp
public class ConsumerComplaintsViewModel: INotifyPropertyChanged
{
    private ObservableCollection<ComplaintsModel> data;
    
    public ObservableCollection<ComplaintsModel> DataValues
    {
        get {return data;}
        set
        {
            data = value;
        }
    }

    public ConsumerComplaintsViewModel()
    {
        DataValues = new ObservableCollection<ComplaintsModel>()
        {
            new ComplaintsModel(){Defect = "Mortgage", Frequency=225394 },
            new ComplaintsModel(){Defect = "Debt collection", Frequency=145071},
            new ComplaintsModel(){Defect = "Credit reporting", Frequency=139929},
            new ComplaintsModel(){Defect = "Credit card", Frequency=88471},
            new ComplaintsModel(){Defect = "Bank account or service", Frequency=84643},
            new ComplaintsModel(){Defect = "Student loan", Frequency=32315},
            new ComplaintsModel(){Defect = "Consumer Loan", Frequency=31411},
            new ComplaintsModel(){Defect = "Payday loan", Frequency=5523},
            new ComplaintsModel(){Defect = "Money transfers", Frequency=5155},
            new ComplaintsModel(){Defect = "Prepaid card", Frequency=3774},
            new ComplaintsModel(){Defect = "Other financial service", Frequency=1031},
            new ComplaintsModel(){Defect = "Virtual currency", Frequency=17},
        };   
    }
    . . .
}
```

## Step 3: Preparing the cumulative data source

Let’s calculate the cumulative frequency for the Pareto chart using the formula **(Defect count / Sum of defects) \* 100**. Then, we’ll update the **CumulativeSource** property with the calculated value.

Refer to the following code example.

```csharp
public class ConsumerComplaintsViewModel : INotifyPropertyChanged
{
    private ObservableCollection<ComplaintsModel> data;
    
    public ObservableCollection<ComplaintsModel> DataValues
    {
        get { return data; }
        set
        {
            if (value != data)
            {
                data = value;
                CalculateCumulative(data);
            }
            
            OnPropertyChanged("DataValues");
        }
    }

    public ObservableCollection<CumulativeModel> CumulativeSource { get; set; }

    private void CalculateCumulative(object source)
    {
        var dataSource = source as ObservableCollection<ComplaintsModel>;
        if (dataSource != null && dataSource.Count > 0)
        {
            CumulativeSource.Clear();
            var orderedList = dataSource.OrderByDescending(x => x.Frequency).ToList();
            double cumulativeCount = 0;
            foreach (var data in orderedList)
            {
                cumulativeCount += data.Frequency;
                CumulativeSource.Add(new CumulativeModel() { Defect = data.Defect, YValues = data.Frequency, CumulativeCount = cumulativeCount });
            }

            if (cumulativeCount > 0)
            {
                foreach (var data in CumulativeSource)
                {
                    data.CumulativeFrequency = (data.CumulativeCount / cumulativeCount) * 100;
                }
            }
        }

    }
}
```

## Step 4: Configure the Syncfusion .NET MAUI Charts

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

Refer to the following code example.

```xml
<chart:SfCartesianChart Margin="10">
 <chart:SfCartesianChart.XAxes> 
  <chart:CategoryAxis> 
  </chart:CategoryAxis> 
 </chart:SfCartesianChart.XAxes> 
 
 <chart:SfCartesianChart.YAxes> 
  <chart:NumericalAxis> 
  </chart:NumericalAxis> 
 </chart:SfCartesianChart.YAxes> 
</chart:SfCartesianChart>
```

## Step 5: Binding data to the chart

As mentioned previously, the Pareto chart comprises of both column and line series. To design the chart, we’ll use the Syncfusion [ColumnSeries](https://help.syncfusion.com/maui/cartesian-charts/column "Column Chart in .NET MAUI Charts") and [LineSeries](https://help.syncfusion.com/maui/cartesian-charts/line "Line Chart in .NET MAUI Charts") instances.

Make sure to configure the  **ConsumerComplaintsViewModel** class to bind its properties to the Charts  **BindingContext**.

Refer to the following code example. Here, in the **ColumnSeries** , we’ve bound the **Label** , **ItemsSource** , **XBindingPath** , and **YBindingPath** properties with the **Count** , **DataValues** , **Defect** , and **Frequency** properties, respectively.

In the **LineSeries** , we’ve bound the **Label** , **ItemsSource** , **XBindingPath** , and **YBindingPath** properties with the **Cumulative%** , **CumulativeSource** , **Defect** , and **CumulativeFrequency** properties, respectively.

```xml
<ContentPage.BindingContext>
 <local:ConsumerComplaintsViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<chart:SfCartesianChart>
 . . .
 <chart:ColumnSeries Label="Count"
                    ItemsSource="{Binding DataValues}" 
                    XBindingPath="Defect" 
                    YBindingPath="Frequency"/>
 <chart:LineSeries Label="Cumulative %"
                  ItemsSource="{Binding CumulativeSource}" 
                  XBindingPath="Defect" 
                  YBindingPath="CumulativeFrequency"/> 
 . . .
</chart:SfCartesianChart>
```

## Step 6: Customizing the chart appearance 

Let’s customize the chart’s appearance by customizing the axis elements and column colors, adding titles, enabling markers, and adjusting the column width.

Refer to the following code example.

```xml
<Grid RowSpacing="10">
 <Grid.RowDefinitions>
  <RowDefinition Height="1*"/>
  <RowDefinition Height="9*"/>
 </Grid.RowDefinitions>

 <HorizontalStackLayout Grid.Row="0" Spacing="5">
  <Border Background="#570CBE" WidthRequest="25" 
          VerticalOptions="Fill" Stroke="transparent">
  </Border>
  <VerticalStackLayout>
   <Label Text="Pareto Chart" TextColor="#570CBE" 
          FontSize="Large" HorizontalOptions="Start" />
   <Label Text="Identify Key Customer Complaints" 
          TextColor="White" FontSize="Caption" FontAttributes="Italic" HorizontalOptions="Start" />
  </VerticalStackLayout>
 </HorizontalStackLayout>
 <BoxView Grid.Row="1" CornerRadius="20" Margin="5,0,5,10" 
          HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    
 <chart:SfCartesianChart x:Name="chart" Grid.Row="1" Margin="10" 
                         HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
       
  <chart:SfCartesianChart.XAxes>
   <chart:CategoryAxis ShowMajorGridLines="False" 
                       LabelPlacement="{OnPlatform Android= OnTicks, iOS= OnTicks, Default=BetweenTicks}" 
                       LabelRotation="{OnPlatform Android=45,iOS=45}">
    <chart:CategoryAxis.Title>
     <chart:ChartAxisTitle Text="Defects" TextColor="White" 
                           FontSize="15" FontAttributes="Bold" />
    </chart:CategoryAxis.Title>
    < chart:CategoryAxis.LabelStyle>
     <chart:ChartAxisLabelStyle TextColor="White"/>
    </chart:CategoryAxis.LabelStyle>
   </chart:CategoryAxis>
  </chart:SfCartesianChart.XAxes>
        
  <chart:SfCartesianChart.YAxes>
   <chart:NumericalAxis ShowMinorGridLines="False" 
                        PlotOffsetEnd="10" Interval="25000" 
                        EdgeLabelsDrawingMode="Center" ShowMajorGridLines="True" 
                        LabelCreated="NumericalAxis_LabelCreated">
    <chart:NumericalAxis.Title>
     <chart:ChartAxisTitle Text="Frequency" 
                           TextColor="White" 
                           FontSize="15" FontAttributes="Bold" />
    </chart:NumericalAxis.Title>
    < chart:NumericalAxis.LabelStyle>
     <chart:ChartAxisLabelStyle TextColor="White"/>
    </chart:NumericalAxis.LabelStyle>
    < chart:NumericalAxis.AxisLineStyle>
     <chart:ChartLineStyle Stroke="Transparent" StrokeWidth="0"/>
    </chart:NumericalAxis.AxisLineStyle>
   </chart:NumericalAxis>

   <chart:NumericalAxis Name="CumulativeAxis" EdgeLabelsDrawingMode="Center" 
                        Interval="10" ShowMajorGridLines="False" 
                        ShowMinorGridLines="False" Minimum="0" Maximum="100" 
                        PlotOffsetEnd="10" CrossesAt="{x:Static x:Double.MaxValue}">
    <chart:NumericalAxis.Title>
     <chart:ChartAxisTitle Text="% of Defects" TextColor="White" 
                           FontSize="15" FontAttributes="Bold" />
    </chart:NumericalAxis.Title>
    <chart:NumericalAxis.AxisLineStyle>
     <chart:ChartLineStyle Stroke="Transparent" StrokeWidth="0"/>
    </chart:NumericalAxis.AxisLineStyle>
    <chart:NumericalAxis.LabelStyle>
     <chart:ChartAxisLabelStyle LabelFormat="0'%'" TextColor="White"/>
    </chart:NumericalAxis.LabelStyle>
   </chart:NumericalAxis>
  </chart:SfCartesianChart.YAxes>
  <chart:ColumnSeries Label="Count"
                      ItemsSource="{Binding DataValues}" 
                      XBindingPath="Defect" 
                      YBindingPath="Frequency" 
                      PaletteBrushes="{Binding CustomPalette}" 
                      Width="0.8" 
                      CornerRadius="5,5,0,0"/>
   <chart:LineSeries Label="Cumulative %"
                     ItemsSource="{Binding CumulativeSource}" 
                     XBindingPath="Defect" 
                     YBindingPath="CumulativeFrequency" 
                     StrokeWidth="2" Fill="#03DAC5" 
                     YAxisName="CumulativeAxis" 
                     ShowMarkers="True">
    <chart:LineSeries.MarkerSettings>
     <chart:ChartMarkerSettings Width="12" 
                                Height="12" 
                                Fill="white" 
                                StrokeWidth="2" 
                                Stroke="#570CBE"/>
    </chart:LineSeries.MarkerSettings>
   </chart:LineSeries>
 </chart:SfCartesianChart>
</Grid>
```

After executing the previous code examples, the output will look like the following image:
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Creating-a-Pareto-Chart-for-Visualizing-Consumer-Complaints-Using-Syncfusion-.NET-MAUI-Charts.png" alt="Creating a Pareto Chart for Visualizing Consumer Complaints Using Syncfusion .NET MAUI Charts" style="width:100%">

  <figcaption>Creating a Pareto Chart for Visualizing Consumer Complaints Using Syncfusion .NET MAUI Charts</figcaption>

</figure>

## GitHub reference

For more details, refer to the demo on [GitHub](https://github.com/SyncfusionExamples/Creating-a-Pareto-Chart-to-Identify-Key-Customer-Complaints "Creating .NET MAUI Pareto Chart to Identify Key Customer Complaints GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to create a Pareto chart to visualize consumer complaints using Syncfusion’s [.NET MAUI Charts control](https://www.syncfusion.com/maui-controls/maui-cartesian-charts ".NET MAUI Cartesian Charts"). We encourage you to follow the steps discussed and share your thoughts in the comments 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 happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 3 is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx "Blog: Syncfusion Essential Studio 2023 Volume 3 is Here!")
- [Advanced Date Customization in .NET MAUI Calendar Control](https://www.syncfusion.com/blogs/post/advanced-date-customization-dotnet-maui-calendar.aspx "Blog: Advanced Date Customization in .NET MAUI Calendar Control")
- [Introducing the 9th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/whats-new-dotnet-maui-2.aspx "Blog: Introducing the 9th Set of New .NET MAUI Controls and Features")
- [What’s New in 2023 Volume 3: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/whats-new-dotnet-maui-chart.aspx "Blog: What’s New in 2023 Volume 3: .NET MAUI Charts")