How to Create a Pareto Chart in Flutter Cartesian Chart?

This article explains how to create a Pareto Chart using the Flutter Cartesian Chart. A Pareto Chart is a combination of a Column and a Line chart, used to analyze defects or issues by frequency and cumulative percentage. The Column chart represent defect occurrences in descending order, while the Line chart displays the cumulative percentage of total occurrences.

The following steps explains how to create a Pareto Chart in Syncfusion® Flutter Cartesian Chart.

Step 1: Create a model class to represent each data point in the Pareto Chart.

class ParetoChartData {
  ParetoChartData(
    this.defectCategory,
    this.occurrences,
    this.cumulativePercentage,
  );
  final String defectCategory;
  final int occurrences;
  final double cumulativePercentage;
}

Step 2: Define a list of defect categories along with their occurrences and sort them in descending order. Compute the total occurrences using the fold function. Then, iterate through the sorted list, maintaining a cumulative sum of occurrences.

At each step, calculate the cumulative percentage using (cumulativeOccurrences / totalOccurrences) * 100, ensuring that the final value reaches 100%. The processed data is returned as a list, where the Column chart represents defect occurrences, and the Line chart visualizes cumulative percentages.

final List<ParetoChartData> paretoChartData = _generateParetoChartData();

/// Generates Pareto chart data by sorting defects by frequency
static List<ParetoChartData> _generateParetoChartData() {
  List<Map<String, dynamic>> defectData = [
    {'defectCategory': 'Scratches', 'occurrences': 50},
    {'defectCategory': 'Dents', 'occurrences': 30},
    {'defectCategory': 'Cracks', 'occurrences': 20},
    {'defectCategory': 'Misalignment', 'occurrences': 10},
    {'defectCategory': 'Discoloration', 'occurrences': 5},
  ];

  // Sort defects in descending order based on occurrences
  defectData.sort((a, b) => b['occurrences'].compareTo(a['occurrences']));

  int totalOccurrences =
      defectData.fold(0, (sum, item) => sum + (item['occurrences'] as int));
  double cumulativePercentage = 0.0;

  return defectData.map((item) {
    cumulativePercentage += (item['occurrences'] as int);
    return ParetoChartData(
      item['defectCategory'] as String,
      item['occurrences'] as int,
      (cumulativePercentage / totalOccurrences) *
          100.0, // Convert to percentage
    );
  }).toList();
}

Step 3: Create the Pareto Chart, by using the SfCartesianChart widget.

• Add a ColumnSeries to represent defect occurrences.
• Add a LineSeries for cumulative percentage.
• The axes property is used to add a secondary Y-axis to accommodate the different measurement scales (count vs. percentage). This ensures that defect occurrences and cumulative percentage are plotted on separate axes for accurate representation.
• The opposedPosition property places this secondary axis on the right side for better readability.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfCartesianChart(
      legend: Legend(isVisible: true),
      primaryXAxis: CategoryAxis(
        title: AxisTitle(text: 'Defect Category'),
      ),
      primaryYAxis: NumericAxis(
        title: AxisTitle(text: 'Number of Occurrences'),
      ),
      axes: <ChartAxis>[
        NumericAxis(
          name: 'cumulativePercentageAxis',
          opposedPosition: true,
          maximum: 110,
          title: AxisTitle(text: 'Cumulative Percentage'),
        )
      ],
      series: <CartesianSeries>[
        // Column Series - Represents defect occurrences.
        ColumnSeries<ParetoChartData, String>(
          dataSource: paretoChartData,
          xValueMapper: (ParetoChartData data, _) => data.defectCategory,
          yValueMapper: (ParetoChartData data, _) => data.occurrences,
          dataLabelSettings: DataLabelSettings(isVisible: true),
        ),
        // Line Series - Represents cumulative percentage.
        LineSeries<ParetoChartData, String>(
          dataSource: paretoChartData,
          xValueMapper: (ParetoChartData data, _) => data.defectCategory,
          yValueMapper: (ParetoChartData data, _) => data.cumulativePercentage,
          yAxisName: 'cumulativePercentageAxis',
          name: 'Cumulative %',
          markerSettings: MarkerSettings(isVisible: true),
          dataLabelSettings: DataLabelSettings(
            isVisible: true,
            labelAlignment: ChartDataLabelAlignment.top,
          ),
        )
      ],
    ),
  );
}

Now, the Pareto Chart using Flutter Cartesian Chart has been implemented as shown below.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to implement Pareto Chart using a Flutter Cartesian Chart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!