Two ways to seamlessly integrate KPI definitions into your Tableau dashboard

Recently, a colleague asked for my help with a seemingly simple problem. He was making a tabular-based dashboard with a lot of different metrics, and he wanted the metric definitions to show up as tooltips when someone hovered over the metric name. As someone who has created countless separate dashboard views with metric definitions, it was a lightbulb moment.

Why would we force our end users to go to a separate view to know what KPIs they’re looking at? How had I never thought about integrating metric definitions into a dashboard? Within a few minutes, I realized that one of my favorite label hacks would do the trick, and I was thrilled to share the solution with him. In true Tableau fashion, it requires a separate data source and is very hacky, but the result adds so much value to the end user.

While brainstorming this article, I thought of another simple solution for integrating KPI definitions, so get excited for the double feature!

To see the full results and download the workbook, view the dashboard on Tableau Public.

Option 1: Label hacking!

I personally love all the label hacks I’ve come across and use them in almost every dashboard. In my opinion, labels and tooltips are elements that can take a dashboard from good to great. Polished and integrated labels add a sense of refinement and design thinking to a viz, and unfortunately the default labels in Tableau often don’t cut it for my standards.

Luckily, there’s a super simple way to take your labels to the next level, and by using my favorite hack you can easily add a tooltip with a metric definition when you hover over the title.

This example will use a tabular view because that’s the use case I was originally given, but this technique can be used for any type of labels, and you’ll end up with something like this:

Step by step instructions:

1. Create a separate csv data source with KPI names in one column, and their definitions (or whatever else you care to highlight) in another. Add this file as a data source, but don’t join to anything.
2. Create your table. It should look something like this. At this point, you can hide the headers since we will make a separate label worksheet.

Pretty straightforward…hmm but what is PPU? How nice would it be to hover over the header and see the definition?

3. Create a new worksheet with your definitions as the source. Put KPI name in the rows, and put max(1) in the columns. This little trick is the key to all my label hacks. You see, we are just using a nicely formatted bar chart as a label, which gives us all of the tooltip options we could want.

4. To format the bars:

• Edit Axis -> change the range to Fixed (0,1). This will give us full-width bars. Then hide the axis.
• Labels -> Put KPI name on the label mark and align center. Then hide the bar headers — these bars are the labels now! Reorder to match your table.
• Colors -> Change to whatever colors you like. If you want the bars to match the default banding, add KPI name to the colors mark and manually change the colors for each KPI.
• Etc spacing -> If you’re a formatting perfectionist like myself, it will bother you when everything is put together that the label bars don’t perfectly align with the table rows. Have no fear! If you add a fake header into the columns, you’ll get the header row to match the header spacing on the table. Simply make the header text white and drag the header divider to the left as far as you can to pretend it’s not there.

5. Putting it all together — you’re ready to make your dashboard! Drag a horizontal container to your dashboard, and pull both sheets in. Set both to “Fit Entire View” and adjust the width as you would like. If you want it to look seamless, you can remove all left & right padding so the labels flow into the table rows with no space. You may also need to adjust the bar size to get the vertical spacing right.

Voila! Medium doesn’t support embedded Tableau dashboards, but in the screenshot below you can see the tooltip pop up when hovering over the PPU header. You can also checkout the dashboard on Tableau Public to see the before and after live in action.

Option 2: Use viz-in-tooltip for same-dashboard access to all metric definitions

I remember the excitement of viz-in-tooltip when it was released, and I’ve seen some very cool use cases. One of my favorite use cases is to add context to a dashboard without adding more clutter. Imagine having a (?) icon in the top right corner of a dashboard, and when you hover over it you get clear instructions on how to use and interpret the dashboard. This is the same concept, but highlighting metric definitions. It’s not as seamless as integrating definitions into individual tooltips, but it provides easy access to all definitions.

1. Make a worksheet with your definition table. Style as you would like.
2. Make a worksheet with your chosen icon. The easiest way to do this is to double click the marks card, type in some string (like “Info”), and then pull the created pill to Shapes. You can choose your preferred shape, whether that’s a default option or a custom shape. I chose a lightbulb.
3. Click the Tooltips mark -> Insert -> Sheets -> select your definition sheet. You will likely have to adjust the maxwidth and maxheight options so the whole sheet shows up when you hover.
4. Add the icon worksheet to the dashboard — you will probably want to make it floating.

Voila number 2! Super easy and quick to implement, but you’ve just added a ton of value for your end users, especially if you have complicated metric definitions or unintuitive naming conventions.

The dashboard with both of these options is on Tableau Public and available to download if you would like to see the individual worksheets.

Do you have any other fun label hacks or interesting techniques to provide additional context seamlessly to users within a dashboard? If so, I would love to hear about them in the comments!