Enhance Your Bar Charts: Adding KPI Shapes on the Left in Tableau

Visualize Your KPIs: Enhancing Tableau Bar Charts with Left-Aligned Shapes

Step-by-Step Guide: Adding KPI Shapes on the Left Side of Bar Charts in Tableau

KPIs (Key Performance Indicators) drive a lot of business decisions. Showing bold and big font numbers on a Dashboard are good practices for visualization. But color-coding them will take it to the next level because colors appeal to the end-users more by adding the “wow” factor. Using shapes to represent the KPI will seal the deal-making the best approach. Scientifically, the human brain is tuned to understand and react to shapes and colors pretty fast. Showing them together will make it an awesome combo (better than Chips and Salsa or Wine and Cheese).

Adding KPI Shapes: A Visual Enhancement for Tableau Bar Charts

Left-Aligned KPI Shapes: Improving Visualizations in Tableau Bar Charts

Creating Informative Bar Charts: Integrating KPI Shapes on the Left Side in Tableau

Enhancing Visual Appeal: Incorporating KPI Shapes into Tableau Bar Charts

While we are discussing Colors and Shapes, it is better to focus on some best practices. The most commonly used KPI shapes are Arrows or Triangles showing Up (▲) for good or positive and Down (▼) for bad or negative (Eg. Stock values); Gender symbols for Male (♂) and Female (♀) (Eg. Pie charts showing a number of jobs or election votes based on gender); Star ratings (★★★★★) or Emoticons (☺☺) (Eg. Customer satisfaction survey) or Harvey color balls (◔, ◒, ◕) (Eg. Process completion) which Uday Hegde (our CEO) is a fan of. Similarly, we have a lot of examples.

Using the appropriate shapes with the right colors makes it easy to identify things on the Tableau Dashboard. Here again, the debate of what colors to be used is to be considered. For many developers who follow best practices, Red & Green, Green & Brown, Red & Brown, Red & Blue, Yellow & Green are avoided because of Color Blind audience (about 10% of the population suffer from Protanopia or Deuteranopia or Tritanopia). But some developers argue that though these colors are difficult to read, the shapes will provide an alternate dimension to understand. Those that can read colors, great. If not, these users will understand shapes. Those who can read both, have nothing to complain about at all.

Understanding KPI Shapes: Utilizing Visual Cues for Key Performance Indicators in Tableau

Step-by-Step Instructions: Adding Left-Aligned KPI Shapes to Tableau Bar Charts

Visualizing Performance Metrics: Enhancing Bar Charts with KPI Shapes in Tableau

Optimizing Tableau Dashboards: Adding Informative Elements to Bar Charts

To achieve this, a sample data set showing actual and forecast is being used. This is the same data set used in one of the other blogs. This time too, we will be creating a Bar in Bar chart. The concept is this: The Forecast measure (being the threshold) will be in the background and the Actual measure (main measure in consideration) will be in the foreground. The KPI chart in Tableau shown to the end-user is that whenever the Actual is bigger than the Forecast value, showing an Upward pointing Green Arrow (▲ or ⬆) else showing a Downward pointing Red Arrow (▼ or ⬇). Finally showing the % Difference/Change number also beside KPI chart in tableau

(Same can be adopted to % Increase or % Decrease).

A step-by-step approach is discussed here:

1) Creating a Bar in Bar chart

Using the standard Measure Names and Measure Values approach. (Click here to refer) 

2) Creating a Calculated field to show the Percent difference

In some cases, the formula can be (Sum(Actual) – Sum(Forecast))/Sum(Forecast)

3) Converting number format into a percentage

4) Using the new Calculated field as a Discrete Field on Rows

(The advantage of Aggregate calculations in Tableau is the ability to show them as Discrete entities on the visualization without breaking the values to Row-level)

*The field cannot be used as a Green colored Continuous field as it shows a Scale or Axis making the view look like a Scatter Plot. It has to be converted into a Blue colored Discrete field to show a Header.

With some font adjustments, we arrive at this view.

This itself is a great view. It has all the elements for the end-user to make quick business decisions. But we will take it a step forward by adding shape feature through the Dual Axis. Here it can get messy as there are some steps that are not straightforward. We need to be cautious about Data Type and other considerations.

5) Creating a Calculated Field for the KPI chart in Tableau

Here is where most of us make mistakes. We use the KPI directly on Rows or Columns or use the Dual Axis with the % Difference Calculation and try to create a Dual Axis. Though these steps give us some result, it might not be the one we are expecting.

There is no way to add a shape now. it is a lock position.

Though this approach is good, it might not work as the bar chart and the shapes are merged or in this case, the alignment is difficult to control.

For here on, we can attempt it in two different ways:

Method 1 – Create KPI Shapes on Bar Chart in Tableau

a) Creating a new KPI calculation or altering the existing KPI calculation. This calculation will have shape instead of text flags. For this, Windows machine users can try Character Map. For a Mac machine, users can try Character Palette/Viewer.

b) Using this field on Rows and working with font size and alignment will give us the required view. But the only drawback here is, we cannot assign colors to these shapes. Some end users prefer this simple chart which is great!

Method 2 – Create KPI Shapes on Bar Chart in Tableau

The previous method was simple and straightforward. But we will make it colorful by using the default shapes from the My Tableau Repository

a) Creating an arbitrary value Calculation (Demo field) as per the view. For this example, using -10 as the field as the scale is relatively small in hundreds

b) Using this field as Min() or Max() aggregation on the Columns (same Shelf where Measure Value field exists). Sum() does not work in this case

c) Removing all fields from the Marks segment of Random Value and converting it into a Shape visualization

d) Using the KPI field on Shape card

e) Edit the shape card or shape legend and assign required shapes

f) Using the Size card slider to increase the size of the shapes

g) Converting the view to a Dual Axis chart

We are almost there. But some aesthetic changes remaining.

h) This is a very important step. Since the arrows are very far, we need to bring them close to the bar chart. So, Synchronization is necessary at this point. But Tableau will not allow to Synchronize because of the data type.

i) To overcome this, all the measures used in this visualization must be converted to decimal data type. When all three are decimal data type, the Synchronize option opens up.

j) Last step is to work on cosmetics. Hiding the second axis and editing the tick marks for the primary (Measure Values) axis to avoid the negative scale.