What's the best chart layout for displaying profit/cost/revenue/turnover

by Qualiture   Last Updated August 10, 2018 11:16 AM

Some background

I work as an independent consultant, and as such I use multiple 3rd party software to keep track of my billable hours, sent invoices, due taxes, bank mutations, etc. However, as with any 3rd party solution, it never does exactly what I want it to do, nor are these tightly integrated with each other, so I decided to build my own solution on SAP's PaaS solution, SAP HANA Cloud Platform

The issue

My application will have a dashboard which should display, among other useful things, a YTD graph (or graphs?) with aggregated monthly costs, earnings, and cumulative profit.

Initially I came up with the following idea:

enter image description here

The 'dual stacked columns' depicts the costs (left) and earnings (right), stacked up by category (invoices, taxes, monthly costs, etc) The blue line shows the cumulative profit after each month.

Now, the real issue I'm facing is that this graph does not seem very 'obvious':

  • I feel the distinction between costs and earnings could be better visualized
  • If I have more categories (approx. 8-12) the stacks become less usable I think
  • Although there is a direct correlation between the costs, earnings and cumulative profit, the line graph does not enhance that correlation, visually

What could be a solution?

It could well be my graph of choice is totally ill-chosen, but I'm not sure what it should be... As I have total freedom of how the final result will look like, anything is possible so please think outside of the box. :)

Ideally, I want the data—monthly aggregated costs/earnings sliced down by category, as well as the (cumulative) profit—to be shown in a single graph. However, if you have good pointers why it should be in separated graphs, then please, by all means show me why and where I'm wrong.

Any help towards a feasible, viable and desirable graph is highly appreciated!

I have added a more accurate graph. Please note this is a mashup between an Excel graph and MS Paint thingamajiggery, so the handdrawn blue line does not represent the true cumulative profit based on the monthly costs/earnings

Tags : charts graphs

Answers 4

(repeating my comment with illustration of my point) The choice of the datavis will depend on the data in the focus. For example, the main objective is to compare the cost vs income. I would do it as two overlaying area charts and show stacked area diagrams for both as a breakdown.

enter image description here

Zoe K
Zoe K
December 30, 2014 17:35 PM

You are showing debit and credit next to each other to compare them when all you really want to show is the monthly sum of positive income and negative spendings. Therefore, use a stacked column above the x-axis for income and another one at the same horizontal position and width for costs, just going in the opposite direction. Onto this multipart column, put a marker, e.g. a horizontal line going the whole width of the month, to show the sum, which is of course always inside column dimensions.

Since you also want your chart to include cumulative profit, this could be added as a background area similar in color to the sum indicators. They would usually align with each other in the first month, but any cumulative chart is likely to exceed the monthly maximums after a while, so you might have to put it on a secondary y-axis that is scaled differently.

There is probably also a clever solution to highlight quarterly and yearly values, but I cannot figure it right now. I am also sorry not to provide a proper sketch, but I am on a tablet right now which does not have a proper app for that task installed.

December 31, 2014 09:18 AM

Income is positive earnings and expenses are negative earnings.

If display as such by allowing negative Y-axis can have a simple and clear chart.


download bmml source – Wireframes created with Balsamiq Mockups

Jason A.
Jason A.
December 31, 2014 14:02 PM

Another take at this challenge… See the design & thought process at Visualising data: the case for iteration | Equal Experts


Hugo Ferreira
Hugo Ferreira
August 10, 2018 11:00 AM

Related Questions

What tools were used to create these CSS / SVG charts?

Updated February 26, 2018 22:16 PM

Which graph or chart to use for conversion

Updated December 22, 2018 03:16 AM