Tuesday, April 4, 2017

Adding Arrows ▲▼ by Custom Number Formatting

[The technique described here applies to tooltips design as well.]

Recently it came to me a question on how to put arrows next to numbers to indicate up/down. Some proposed to use Shapes as data mark in dual axis with numbers. This reminds me a custom number formatting trick that Simon Runc used quite a few times in Tableau forum. This post is to document the trick and all credits go to Simon. Neither shapes nor dual axis are necessary.

This is how it works. Given a measure with a range from positive to negative. We can use arrows to indicate the direction of the numbers. Instead of shapes, we just need to use custom number formatting:
▲;▼;►
This will show a measure in arrow: positive, negative or zero.

Other options of interest are:
▲ +0;▼ -0;► 0 (Arrow with number)
▲ +0"%";▼ -0"%";► 0"%" (Arrow with %)
▲;▼;"" (When 0, then Null. No arrow at all)
▲;▼;    (When 0, then ▲ same as positive)

We can use other characters if we wish, instead of solid arrows.
升 +0;降 -0;平 0

Many other custom number formatting tricks can be found here.

To color the arrows differently, we need to create measures for each color, such as:
In the Label editor, the label syntax is written as
We can make the arrows bigger using bigger fonts. Note that each arrow is a measure. By custom number formatting, we make it an arrow.

Below is a dashboard in which more varieties are shown. Open it to see the details.
Click the image above to access the interactive version

That's it.

4 comments:

  1. Hi, could I get copy of the workbook. Thank you

    ReplyDelete
  2. Could I get the datasource too alon with workbook. Thank you

    ReplyDelete