Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (149).NET Core  (24)Angular  (42)ASP.NET  (48)ASP.NET Core  (56)ASP.NET MVC  (84)Azure  (28)Blazor  (68)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (78)JavaScript  (140)Microsoft  (101)PDF  (54)React  (31)Succinctly series  (120)Syncfusion  (457)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (16)Windows Forms  (54)WPF  (106)Xamarin  (117)XlsIO  (22)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (104)Chart  (43)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (36)Development  (244)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (16)Extensions  (9)File Manager  (3)Gantt  (7)Gauge  (5)Git  (3)Grid  (25)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (179)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (18)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (18)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (14)Solution Services  (2)Spreadsheet  (4)SQL  (5)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (41)UI  (101)Uncategorized  (68)Unix  (2)User interface  (66)Visual State Manager  (1)Visual Studio  (15)Visual Studio Code  (8)Web  (154)What's new  (99)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
7 Best Flutter Charts for Visualizing Income and Expenditure

7 Best Flutter Charts for Visualizing Income and Expenditure

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 expenditure details.

I have used the Syncfusion 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, 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.
This column chart shows the past years’ income and expense details.

You can use the ColumnSeries class in the SfCartesianChart widget from the Syncfusion Flutter Charts to achieve this output. The following code snippet illustrates this.

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 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 class in the SfCartesianChart widget to achieve this.

Stacked column chart showing the past years’ income and expense details along with categories.
Stacked column chart showing the past years’ income and expense details along with categories.

Note: For more details, please refer to our Flutter web column chart demo and user guide documentation.

#2 Waterfall chart

The 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 class from the SfCartesianChart widget.

Waterfall chart showing the income, expenses, and net profit details of a company.
Waterfall chart showing the income, expenses, and net profit details of a company.

Refer to the following code example.

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.
These multiple waterfall charts show the income, expenses, and profit details of a company for several years.

Note: For more details, please refer to this Flutter web waterfall chart demo and user guide documentation.

#3 Negative stacked bar chart

The 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 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.
Stacked bar chart showing income with positive values and expenses with negative values.

Refer to the following code example.

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 and user guide documentation.

#4 Bubble chart

The 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 class from the SfCartesianChart widget to achieve this.

Bubble chart showing the income growth in various categories.
Bubble chart showing the income growth in various categories.

Refer to the following code example.

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 and user guide documentation.

#5 Stacked area chart

The 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 in the Cartesian chart widget.

Stacked area chart showing income from various categories.
Stacked area chart showing income from various categories.

Refer to the following code example.

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 stacked area chart SB sample and user guide documentation.

#6 Pie and doughnut charts

The pie and doughnut charts 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 class from the SfCircularChart widget.

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, 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.
Doughnut chart showing the income percentages from various categories.
Doughnut chart showing the expense percentages from various categories.
Doughnut chart showing the expense percentages from various categories.

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

#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 to visualize income and the column series 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.
Line series showing the income and column series showing the expenses in the same chart.

Refer to the following code example.

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. 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.
Line chart showing the past three years of monthly income and expenses in separate line series.

Note: For more details, please refer to this Flutter web combination chart demo  and user guide documentation.

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, including:

Browse our documentation to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play and the App Store.

If you aren’t a customer yet, you can try our 30-day free trial 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 forumfeedback portal, or Direct-Trac support system. We are always happy to assist you! 

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top