Demystifying Charts Part 1: Waterfalls, Bullets & Sparklines

These 3 charts are the cornerstone of most business dashboards. While a simple bar or pie might do for a small-scale project with limited relevance, applications that cater to large audiences and have to show dynamic updates and summaries must go a step further. That’s where slightly more convoluted charts come into play. A variety of data, plus the need to show several insights at once, combined with limited space – charts have to pack all of this in, and intelligently. In the next few articles, we’ll talk about few *apparently* complicated charts, take them apart and put them back together – explaining exactly how each component makes sense. And we also look at a set of do’s and don’ts around them. So let’s get started – here’s how you can employ 3 difficult charts, with zero difficulty:

Plot exactly how it happened, with a waterfall chart

Waterfall charts look like column charts but show more than a simple comparison. The first column shows the total numbers at the very beginning – the original, to which values are either added or deducted. For every addition, the next column begins where the first one ends and goes upwards. For reductions also, the final value of the last column is taken as the baseline but then, dips downwards. Let’s look at an example. We begin with product revenues – USD 420,000. This serves as the starting line of the next column – Services Revenue. This amounts to USD 210,000 which brings the total to USD 630,000. From there, we could directly move to costs, which are primarily reductions. Note: you could choose not to show the total revenue as a separate column because the upper limit of Services Revenue already has encoded in it the USD 630,000 value. The separate Total Revenue column, however, does simplify understanding and allows quick comparisons of revenue, costs, and net. The first Fixed Costs column continues where the last column left off, that is at USD 630,000. From there, it cuts down by USD 170,000 to reach USD 460,000. The next one, similarly, reduces it further by USD 140,000 to finally reach a total reduction of USD 310,000 – the entire cost amount. And the lower limit of the Variable Costs column stands at USD 320,000 – the final net revenue. Showing distribution is one of the major use cases for the waterfall – making it relevant to many business scenarios. A chart showing employee count, for example, could indicate the number of referral hires, job portal recruitments, and unsolicited applicants, balanced with voluntary resignations, terminations, and mutual outplacement – mapping all the factors leading to the current workforce. Another important application is to show change over time. Take the employee count example once again, instead of mapping contributing factors we could show month on month numbers. The total workforce is the primary column, with the change being demonstrated across 12 columns (for 12 months) to arrive at the final number.

Add more context, with Bullet Charts

Data visualization expert Stephen Few’s brainchild, the bullet graph takes the same concept as the bar or column and adds more information. But this is done smartly, without clutter, or hampering readability. Here are the ways of incorporating data into a bar: Image source The text label packs in all the data we’d find in a traditional axis label. The quantitative scale – the numbers from 0 to 100 – depicts the exact data value without suggesting if it’s good or bad. Imagine instead of internal revenues; the chart was plotting a competitor’s market share – would USD 250,000+ be a good thing or a bad thing? To add this kind of qualitative background, the bullet graph has colors – the dark shades usually standing for negative and the lightest, the best. In the middle of it all is the bar – in an almost thermometer-like casing, this shows actual performance. And finally, we have the target notch. Revenues would have to hit this target to be acceptable – but for costs (or other negative KPIs), they must be below a specific limit. Importantly, to show negative values like attrition rates, expenditure, loss, and so on, the bullet graph takes a different approach. An expense graph with the usual left-to-right, bad-to-good, dark-to-light progression would look like this: Now, this is clearly incorrect – low expense levels must be a good thing! To circumvent this, we could reverse the coloring, or as Stephen Few suggests, we maintain the same coloring but reverse the numbering. vs. This has the advantage of making the user pause during analysis, reducing the chances of skipping the difference. USD 150,000 in revenue becomes -150,000 in expense with higher numbers (i.e., lower value) aligned to the left and keeping the dark to light progression as before. Visual continuity isn’t lost, and the user remains engaged. Bullet graphs are the go-to alternative for KPI dashboards – while they aren’t built for immediate insights like a waterfall, the sheer amount of information bundled in makes it unique.

Compare the movements behind the numbers, with spark charts

When it comes to data-rich visualizations, spark charts continue to rule – an elegant concept, they could be intricate and detailed when executed just right. Sparks are a simple line or column chart added to a table. Let’s say a table’s row contains footfall at a mall, over 7 days – the 8th cell in the row would have a micro-chart that plots these 7 figures. They could also be used as part of a dashboard, where we have the total metrics listed along with a spark chart beside it, breaking it down to trends, components, and changes. This is a sparkline chart showing website traffic – part of a more extensive visualization that also lists average interaction, bounce rate, conversion ratios, and so on. The idea, here, is not to focus on the minutiae – but understand the bigger picture, clearly, and how each component with fit into it. Steady website traffic, for instance, but a bounce rate that varies wildly from month to month could suggest the following: good design and SEO optimization that’s bogged down by poor content, with occasional spurts of quality. For sparkline chart, it’s all about the execution – make it too wide, and the fluctuations peter down to barely noticeable; not wide enough, and it begins to show dramatic volatility. Since there are no X or Y axes, the user has little to go on – adding trendlines, reference points, or even color coding highs and lows could help add context. and Sparks are a staple for dashboards that have a lot of KPIs, all important and all changing over time.

So…that’s all folks?

Well, not quite. At first glance, several popular charts could appear difficult to understand and even harder to create. The candlestick is an industry standard for showing stock prices, yet to the lay user, they could appear confusing – and there are many on similar lines. Nearly all search results for Jetpay’s place in the stock market turned up candlestick charts – that’s how common they are. In this series we talk about the nuts and bolts of these *apparently* complicated charts, and how they could be used. Armed with this information, it becomes easier to zero-in on the perfect chart for every application. Knowledge, as they say, is power, and when it comes to visualization, it is the key to revealing the true impact of all the numbers and the data. Stay tuned for our next blog, where discuss – you guessed it – candlesticks! If there’s another chart you’d like to understand just a little bit better, leave a comment below and we’ll add that to our article as well.