Menu Close

Fun with Markdown in your dashboards

Jun 9, 2020 by The Metabase Team

Building effective dashboards often involves providing context for folks to give them insight into how or why a calculation exists. While precise titles, descriptions, and labeled axes can go a long way toward clarifying your visualizations, Metabase also allows you to add flexible text boxes to your dashboards. This post will show you how to take full advantage of this feature using Markdown syntax.

Adding text to dashboards

Select a dashboard you’d like to add text to, and click on the pencil icon to edit the dashboard. Click on the Aa button in the dashboard toolbar. A text box will appear, which you can move around just as you would a question box. To resize the text box, click and drag on its bottom right corner.

Adding question and text box to dashboard

Writing in the text box

To interact with a text box, you’ll need to be in edit mode in a dashboard. Click on the pencil icon in the dashboard toolbar in the upper right of the dashboard.

Text boxes in Metabase have two modes.

  • Edit text (paper and pencil icon).
  • Rendered view (eye icon).

The text editor in Metabase employs a lightweight markup language called Markdown. If you’ve never used Markdown before, it takes some getting used to, but you’ll soon learn to appreciate its simplicity. Markdown can make writers feel like coders and coders feel at home.

How Markdown works

You write a line of Markdown:

# Heading

And Metabase converts your plain text into formatted HTML code.

<h1>Heading<H1>

Which renders like this:

Heading

You can access six levels of headings just by adding more #s.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Which Metabase renders as:

headings

You can use Markdown syntax to add links, images, gifs, lists, codeblocks, blockquotes, and more. Here’s a text box with heading, paragraph, blockquote, and code block:

Heading, paragraph, and blockquote

You can do everything this post does and more using text boxes in Metabase. The big deal with Markdown is that you don’t have to write tedious HTML, and Markdown is human-readable even when it’s not rendered. Its minimalist feature set will keep you focused on the content, and provide a standardized look across your dashboards.

You can learn more about Markdown syntax in this guide, as well as from one of Markdown’s original creators, which also includes the philosophy behind Markdown. As a bonus, the site allows you to view its content in Markdown syntax.

Example text box

Here is an example dashboard with a question and text box:

dashboard with question and text box

Here is the Markdown code used in the text box above:

# Analysis

Although **Gadgets** outsold **Gizmos** in 2019, we only introduced **Gizmos**  and **Doohickeys** in September  of 2019. Additionally, both **Gadgets** and **Widgets** were heavily discounted during our spring, summer, and holiday sales.

We expect sales to continue to grow in the **Gizmo** and **Doohickey** product lines.

# SQL query

    SELECT "PRODUCTS__via__PRODUCT_ID"."CATEGORY" AS "CATEGORY", 
    sum("PUBLIC"."ORDERS"."QUANTITY") AS "sum"
    FROM "PUBLIC"."ORDERS"
    LEFT JOIN "PUBLIC"."PRODUCTS" "PRODUCTS__via__PRODUCT_ID" ON 
    "PUBLIC"."ORDERS"."PRODUCT_ID" = "PRODUCTS__via__PRODUCT_ID"."ID"
    WHERE ("PUBLIC"."ORDERS"."CREATED_AT" >= timestamp with time zone '2019-01-01 00:00:00.000Z' 
    AND "PUBLIC"."ORDERS"."CREATED_AT" < timestamp with time zone '2020-01-01 00:00:00.000Z')
    GROUP BY "PRODUCTS__via__PRODUCT_ID"."CATEGORY" 
    ORDER BY "sum" ASC, "PRODUCTS__via__PRODUCT_ID"."CATEGORY" ASC	

# Contact

If you have questions, reach out to us on the [\#product](https://fakemessageservice.com/product) channel.

The hypothetical analyst provided some context, code, and contact info: but you can include whatever context will help readers of your report.

Note: in the example above, the analyst pasted the raw SQL query generated by the notebook editor for reference. You can view the SQL composed by the notebook editor by clicking on the console icon to “View the SQL” when in editing mode.

One last pro tip for gif aficionados

The image syntax,

![image description](image-link)

also works for gifs. Because there are far more important use cases for dashboard text boxes:

shades off dashboard

In fact, you don’t even need to include data in your dashboards; you could just go full gif:

all gif dashboard

Happy Markdowning!