7 Best Flutter Charts for Visualizing Income and Expenditure
Tags: flutter, android, ios, webdev
Published: 2021-02-26 04:31:25

---
title: 7 Best Flutter Charts for Visualizing Income and Expenditure
published: true
date: 2021-02-24 11:00:05 UTC
tags: flutter, android, ios, webdev
canonical_url: https://www.syncfusion.com/blogs/post/7-best-flutter-charts-for-visualizing-income-and-expenditure.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/7-Best-Flutter-Charts-for-Visualizing-Income-and-Expenditure-672x372.png
---

Income and expense tracking is crucial to any business, no matter if it’s a start-up or a well-established company. For entrepreneurs, income and expenses will be the first things they need to track to assess how well their business runs. Charts play an important role in visualizing these numbers. But you should carefully choose the appropriate chart type for your data story to convey information clearly. In this blog, I will walk you through the seven best chart types for visualizing your income and expense details.

I have used the [Syncfusion Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget to illustrate the chart types, but they are not limited to Flutter and you will find these chart types in other platforms as well.

## #1 Column chart

The [column chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart), also known as the vertical bar chart, uses vertical bars to display different values for one or more items. It is the most common chart type used to compare values across categories.

In our case, you can visualize various scenarios like comparing your income and expense details across various years, comparing a single year’s data divided into various categories, comparing your details with a competitor’s, etc.

In the following example, I show the income and expense details of several years using two column series.

![This column chart shows the past years’ income and expense details.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/This-column-chart-shows-the-past-years%E2%80%99-income-and-expense-details..jpg)<figcaption>This column chart shows the past years’ income and expense details.</figcaption>

You can use the [ColumnSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/ColumnSeries-class.html) class in the [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/SfCartesianChart-class.html) widget from the [Syncfusion Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) to achieve this output. The following code snippet illustrates this.

```dart
SfCartesianChart(
  series: <ColumnSeries<ChartData, num>>[
    ColumnSeries<ChartData, num>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    ),
    ColumnSeries<ChartData, num>(
      dataSource: expenseData, 
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Expense'
    )
  ]
)
```

Similarly, you can use the [stacked column](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-chart) chart if you wish to split up the income and expense columns and compare them across various categories. This gives you an in-depth picture of which category contributes to more income, etc. You can use the [StackedColumnSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/StackedColumnSeries-class.html) class in the SfCartesianChart widget to achieve this.

![Stacked column chart showing the past years’ income and expense details along with categories.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Stacked-column-chart-showing-the-past-years%E2%80%99-income-and-expense-details-along-with-categories..jpg)<figcaption>Stacked column chart showing the past years’ income and expense details along with categories.</figcaption>

**Note:** For more details, please refer to this Flutter web [column chart demo](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/column/default-column-chart) and [user guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/chart-types#column-chart).

## #2 Waterfall chart

The [waterfall chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/waterfall-chart) shows gradual changes in the quantitative value of an entity that is subject to change by increments or decrements. This is one of the best chart types for visualizing income, expenses, and profit/loss details. We can specify the incomes as positive values and expenses as negative values.  We can also display different colors for positive, negative, intermediate, and total data points, to differentiate them from one another.

In the following example, I have plotted revenue and expense details in various categories along with the net profit at the end. This is achieved by using the [WaterfallSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/WaterfallSeries-class.html) class from the SfCartesianChart widget.

![Waterfall chart showing the income, expenses, and net profit details of a company.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Waterfall-chart-showing-the-income-expenses-and-net-profit-details-of-a-company..jpg)<figcaption>Waterfall chart showing the income, expenses, and net profit details of a company.</figcaption>

Refer to the following code example.

```dart
SfCartesianChart(
  series: <WaterfallSeries<ChartData, String>>[
    WaterfallSeries<ChartData, String>(
      dataSource: chartData,
      xValueMapper: (ChartData data, _) => data.x,
      yValueMapper: (ChartData data, _) => data.y,
      intermediateSumPredicate: (ChartData data, _) => data.intermediateSumPredicate,
      totalSumPredicate: (ChartData data, _) => data.totalSumPredicate,
      color: Color.fromRGBO(0, 189, 174, 1),
      negativePointsColor: Color.fromRGBO(229, 101, 144, 1),
      intermediateSumColor: Color.fromRGBO(79, 129, 188, 1),
      totalSumColor: Color.fromRGBO(79, 129, 188, 1)
    )
  ]
)
```

If you wish to compare values from previous years, then you can use multiple series in a waterfall chart, or you can render multiple waterfall charts for them.

In the following example, I have transposed the chart and rendered a vertical waterfall chart for better understanding.

![These multiple waterfall charts show the income, expenses, and profit details of a company for several years.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/These-multiple-waterfall-charts-show-the-income-expenses-and-profit-details-of-a-company-for-several-years..jpg)<figcaption>These multiple waterfall charts show the income, expenses, and profit details of a company for several years.</figcaption>

**Note:** For more details, please refer to this Flutter web [waterfall chart demo](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/waterfall/default-waterfall-chart) and [user guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/chart-types#waterfall-chart).

## #3 Negative stacked bar chart

The [stacked bar chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-chart) plots data points on top of each other using horizontal bars. Like in the waterfall chart, we can visualize the income with positive values and expenses with negative values, which forms the negative stacked bar chart. This gives a clear-cut comparison of the data.

This chart can be achieved using the [StackedBarSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/StackedBarSeries-class.html) class from the SfCartesianChart widget. In the following example, I have used two stacked bar series.

![Stacked bar chart showing income with positive values and expenses with negative values.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Stacked-bar-chart-showing-income-with-positive-values-and-expenses-with-negative-values..jpg)<figcaption>Stacked bar chart showing income with positive values and expenses with negative values.</figcaption>

Refer to the following code example.

```dart
SfCartesianChart(
  series: <CartesianSeries<ChartData, num>>[
    StackedBarSeries<ChartData, num>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    ),
    StackedBarSeries<ChartData, num>(
      dataSource: expenseData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Expense'
    )
  ]
)
```

**Note:** For more details, please refer to this Flutter web [stacked bar chart demo](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/stacked-charts/stacked-bar-chart) and [user guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/chart-types#stacked-bar-chart).

## #4 Bubble chart

The [bubble chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bubble-chart) is used to visualize 3-dimensional data. It takes three parameters as inputs: x, y, and the size values of the bubble. It can be used when you have to convey additional information to the users.

In the following example, various categories that contribute to the income are plotted. The x-axis value depicts the increased **percentage** over the last year, y-axis value depicts the increased **value** over the last year and the size of the bubble represents the exact value.

From the below chart, we can conclude that the growth of exports is 15%, its value is increased by $1.3M and its current value is $12.2M. Use the [BubbleSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/BubbleSeries-class.html) class from the SfCartesianChart widget to achieve this.

![Bubble chart showing the income growth in various categories.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Bubble-chart-showing-the-income-growth-in-various-categories..png)<figcaption>Bubble chart showing the income growth in various categories.</figcaption>

Refer to the following code example.

```dart
SfCartesianChart(
  series: <BubbleSeries<IncomeData, num>>[
    BubbleSeries<IncomeData, num>(
      dataSource: chartData,
      xValueMapper: (IncomeData data, _) => data.x, 
      yValueMapper: (IncomeData data, _) => data.y,
      sizeValueMapper: (IncomeData data, _) => data.size
    )
  ]
)
```

**Note:** For more details, please refer to this Flutter web [bubble chart demo](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/bubble/default-bubble-chart) and [user guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/chart-types#bubble-chart).

## #5 Stacked area chart

The [stacked area chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-chart) is an area chart in which data points are stacked on top of each other. As this sums up a category’s values, you can see the overall contribution of each category and show the trend of the data.

In the following example, I have visualized income data divided by various categories over several years. Each category is visualized as a series. This is achieved using the [StackedAreaSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/StackedAreaSeries-class.html) in the Cartesian chart widget.

![Stacked area chart showing income from various categories.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Stacked-area-chart-showing-income-from-various-categories..jpg)<figcaption>Stacked area chart showing income from various categories.</figcaption>

Refer to the following code example.

```dart
SfCartesianChart(
  series: <CartesianSeries<ChartData, DateTime>>[
    StackedAreaSeries<ChartData, DateTime>(
      dataSource: stocks, 
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Stocks',
    ),
    StackedAreaSeries<ChartData, DateTime>(
      dataSource: exports, 
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Exports',
    ),
   // Two more series.       
  ]
)
```

**Note:** For more details, please refer to this Flutter web [stacked area chart demo](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/stacked-charts/stacked-area-chart) and [user guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/chart-types#stacked-area-chart).

## #6 Pie and doughnut charts

The [pie](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pie-chart) and [doughnut charts](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/doughnut-chart) are two widely used chart types that present data in a circular graph. They are used for visualizing various scenarios, but one main purpose for choosing them is to visualize percentage data, where the sum of all the slices will be 100.

In our case, we are going to visualize each category’s contribution toward income and expenses in percentages. The sum of all the categories will be 100%.

In the following example, I have used the [DoughnutSeries](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/DoughnutSeries-class.html) class from the [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/SfCircularChart-class.html) widget.

```dart
SfCircularChart(
  series: <DoughnutSeries<ChartData, String>>[
    DoughnutSeries<ChartData, String>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    )
  ]
)
```

Similarly, you can use the [pie series](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/PieSeries-class.html), as well. But one drawback of using these chart types is you have to use two charts for visualizing income and expense details separately.

![Doughnut chart showing the income percentages from various categories.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Doughnut-chart-showing-the-income-percentages-from-various-categories..jpg)<figcaption>Doughnut chart showing the income percentages from various categories.</figcaption>

![Doughnut chart showing the expense percentages from various categories.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Doughnut-chart-showing-the-expense-percentages-from-various-categories.-1-2.png)<figcaption>Doughnut chart showing the expense percentages from various categories.</figcaption>

**Note: ** For more details, please refer to the following links:

- [Pie chart SB sample](https://flutter.syncfusion.com/#/circular-charts/chart-types/pie/default-pie-chart) and [user guide documentation](https://help.syncfusion.com/flutter/circular-charts/chart-types#pie-chart).
- [Doughnut chart SB sample](https://flutter.syncfusion.com/#/circular-charts/chart-types/doughnut/default-doughnut-chart) and [user guide documentation](https://help.syncfusion.com/flutter/circular-charts/chart-types#doughnut-chart).

## #7 Combination and mixed chart

The SfCartesianChart widget allows you to render a combination of different types of series, i.e. you can render two or more types of series in a single chart.

In the following example, I have used the [line series](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/LineSeries-class.html) to visualize income and the [column series](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/ColumnSeries-class.html) for the expenses. In this way, we can avoid confusion and enhance the readability of the data.

![Line series showing the income and column series showing the expenses in the same chart.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Line-series-showing-the-income-and-column-series-showing-the-expenses-in-the-same-chart..jpg)<figcaption>Line series showing the income and column series showing the expenses in the same chart.</figcaption>

Refer to the following code example.

```dart
SfCartesianChart(
  series: <CartesianSeries<ChartData, num>>[
    LineSeries<ChartData, num>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    ),
    ColumnSeries<ChartData, num>(
      dataSource: expenseData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Expense'
    )
  ]
)
```

If we want to compare huge amounts of data (for example, the past five years of monthly sales), the best option is to choose the line chart. From one, the user can understand trends quickly.

In the following example, I have rendered two [line series](https://pub.dev/documentation/syncfusion_flutter_charts/18.4.41/charts/LineSeries-class.html). One is for the income and other is for the expense details.

![Line chart showing the past three years of monthly income and expenses in separate line series.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Line-chart-showing-the-past-three-years-of-monthly-income-and-expenses-in-separate-line-series..jpg)<figcaption>Line chart showing the past three years of monthly income and expenses in separate line series.</figcaption>

**Note:** For more details, please refer to this Flutter web [combination chart demo](https://flutter.syncfusion.com/#/cartesian-charts/series-features/animation/series-animation)  and [user guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/multiple-charts#combination-series).

## Conclusion

Thanks for reading! We hope that these tips will help you to choose the right chart type for visualizing the income and expenses of a company. Check out our Charts component for other platforms besides [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-charts), including:

- [Blazor](https://www.syncfusion.com/blazor-components/blazor-charts)
- [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-charts)
- [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts)
- [Angular](https://www.syncfusion.com/angular-ui-components/angular-charts)
- [WinForms](https://www.syncfusion.com/winforms-ui-controls/chart)
- [WPF](https://www.syncfusion.com/wpf-ui-controls/charts)
- [UWP](https://www.syncfusion.com/uwp-ui-controls/charts)

Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview) to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples). Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341).

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features.

Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [feedback portal](https://www.syncfusion.com/feedback), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents). We are always happy to assist you! ** **

## **Related blogs**

- [7 Tips and Tricks to Improve Your Chart’s Readability](https://dev.to/karthickramasamy08/7-tips-and-tricks-to-improve-your-chart-s-readability-232b-temp-slug-3137228)
- [15 Tips and Tricks to Make Your Charts More Understandable](https://dev.to/karthickramasamy08/15-tips-and-tricks-to-make-your-charts-more-understandable-2k9b-temp-slug-269579)
- [12 Tips to Make Your Charts More Aesthetically Pleasing](https://dev.to/syncfusion/12-tips-to-make-your-charts-more-aesthetic-3g0c)
- [Spice Up Your Flutter App with Interactive Features in Syncfusion Charts](https://dev.to/syncfusion/spice-up-your-flutter-app-with-interactive-features-in-syncfusion-charts-1jh7)