> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lightdash.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboards

> Arrange related charts, text, and video into a single view that your team can read and filter together

A dashboard is a single view that arranges related charts alongside explanatory text and video. Charts on a dashboard can be filtered together, drilled into, and re-zoomed to a different date granularity without anyone editing the underlying charts.

This page covers building one: [planning](#plan-before-you-build), [creating the dashboard](#create-a-dashboard), [adding charts](#add-charts), [markdown and Loom tiles](#add-markdown-and-video-tiles), [saving](#save-your-dashboard), [filters](#add-filters), [tabs](#add-tabs), [hiding tile headers](#hide-tile-headers), and [sharing](#share-your-dashboard). For what viewers can do once it's built, see [interacting with dashboards](/explore/dashboards/interact).

## Plan before you build

A dashboard is easier to build — and much easier to read — if you can answer three questions first.

**Who is this dashboard for?** Does your audience already know the subject, or do they need context to reach your point? Add whatever context they'll need: acronyms that want clarifying, or a note about whether a rising number is good or bad.

**What is this dashboard trying to accomplish?** Do you want your audience to take an action, or to know something they didn't know before, and what information do they need to do it? Write a clear summary of the purpose and put it in the dashboard's description, then outline the questions each tile should answer.

**How will you build it?** Match the data you have to that outline of questions, and work out which metrics and dimensions you'll use — including whether they exist yet.

## Create a dashboard

On the nav bar, click **New** to create a new dashboard.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/create-a-new-dashboard.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=fcb184cc4b00e839f0ea0ce1410b895d" alt="The New menu in the nav bar with the Dashboard option" width="2528" height="1399" data-path="images/explore/dashboards/create-a-new-dashboard.png" />
</Frame>

Fill out the details and hit **Create**. You'll be redirected to your new dashboard page.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/start-building-your-dashboard.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=59c734b287f63a7d16c9a8841866f7a0" alt="An empty dashboard ready for its first tile" width="2534" height="1587" data-path="images/explore/dashboards/start-building-your-dashboard.png" />
</Frame>

From here you add content with the **Add tile** button.

## Add charts

You can create a new chart from within your dashboard, or add an existing one.

### Create a new chart

Creating charts from within a dashboard keeps your spaces and projects free of charts that are only used once. Click **Add tile**, then **New chart**, and you'll be taken to the chart builder. Once you save the chart it appears at the bottom of your dashboard.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/create-chart-within-dashboard.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=b5f1a633839e7301e536346d099c9285" alt="Creating a new chart from inside a dashboard" width="2528" height="1577" data-path="images/explore/dashboards/create-chart-within-dashboard.png" />
</Frame>

Charts created this way are exclusive to the dashboard: they can't be reused in other dashboards, and they don't appear in global search or in any space. To make one reusable, detach it from the dashboard and save it to a space with the **Move to space** option in the chart's three-dot menu.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/move-chart-to-space.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=c0c9cc6709fedf5259903dcd1091e12e" alt="The Move to space option on a dashboard chart" width="2525" height="1598" data-path="images/explore/dashboards/move-chart-to-space.png" />
</Frame>

### Add an existing chart

Click **Add tile**, then **Saved chart**. Clicking any chart adds it at the bottom of your dashboard.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/dashboard-add-saved-chart.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=102bb8b44a152c57f8dfd8880a111370" alt="Adding a saved chart as a dashboard tile" width="1532" height="1172" data-path="images/explore/dashboards/dashboard-add-saved-chart.png" />
</Frame>

Resize a chart by dragging its lower-right corner, and position it by dragging its center.

## Add markdown and video tiles

Alongside charts, you can add markdown tiles and embedded Loom videos to explain the dashboard to the people using it.

### Markdown tiles

Markdown tiles take text with headers and formatting, code blocks, and images. The built-in editor provides most of the formatting you'll need.

<Tip>You can paste IFRAME embed codes to embed things like Notion pages, CRMs, web analytics — anything that offers IFRAME embedding.</Tip>

To add an image hosted on the web, such as your company logo, paste the image URL into the tile using standard markdown image syntax:

```markdown theme={null}
![image alt text here](https://placehold-url.com/image.png)
```

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/dashboard-logo.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=9bb7cc68fcf1a365c1929d8024f58801" alt="A markdown tile displaying a company logo" width="2789" height="872" data-path="images/explore/dashboards/dashboard-logo.png" />
</Frame>

#### Responsive images

To keep images scaling properly as the dashboard resizes, use inline CSS with responsive properties so they aren't stretched or distorted on different screen sizes.

```html theme={null}
<img src="https://example.com/logo.png" style="max-width:100%;height:auto" />
```

For more control over sizing:

```html theme={null}
<img src="https://example.com/logo.png" style="max-width:100%;height:auto;max-height:40px;object-fit:contain" />
```

The supported responsive CSS properties are `max-width` and `min-width` for width bounds, `max-height` and `min-height` for height bounds, `height:auto` to maintain aspect ratio, and `object-fit` to control how images fit (for example `contain` or `cover`).

#### Backgrounds and inline HTML

You can add background colors to markdown tiles to emphasize sections or titles.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/markdown-background.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=eacf059796041578c7c212150271b13c" alt="A markdown tile with a purple background and a welcome heading" width="2826" height="1256" data-path="images/explore/dashboards/markdown-background.png" />
</Frame>

The tile above is built with this code:

```html theme={null}
<div style="background-color:#8379F7;color:#ffffff;padding:32px 28px;border-radius:12px;text-align:center">
  <div style="font-size:48px">⚡</div>
  <h2 style="font-weight:600;font-size:24px">Welcome to your Lightdash Dashboard</h2>
</div>
```

A number of other inline HTML options are available. Copy these into a markdown tile to try them out.

<Accordion title="Other HTML markdown tile options">
  ```markdown theme={null}
  Check out this <b>bold</b> word.
  You can do <i>italics</i>.
  And <u>underline</u>.
  Or maybe you want to <s>strikethrough</s>.

  Show code snippets like <code>Hello World!</code>.
  Or <mark>highlight</mark> something important.

  Add links like <a href="https://docs.lightdash.com/">this!</a>

  Use <sub>subscript</sub> or <sup>superscript</sup>

  <p style="color:red">Easily colour your text.</p>
  <p style="font-size:20px">Or change the size.</p>
  <p style="text-align:center">Center your text.</p>
  <p style="text-align:right">Or align it to the right.</p>
  <p style="text-align:justify">You can even justify a line of text if you are trying to communicate a point that is particularly long, perhaps something like this example sentence?</p>
  <p style="word-spacing:5px">Change the word spacing. 👏</p>
  <p style="font-style:italic;font-weight:bold;color:blue">
      Or combine a whole bunch of styles together.
  </p>

  <h1>It supports headings</h1>
  <h2 style="color:red">Here's an H2 heading in red</h2>

  You can include images and apply options and styles. Here's one I centered earlier:

  <img src="https://placehold.co/300x200" alt="Centered Image" style="display:block;margin:0 auto" />
  ```
</Accordion>

### Loom tiles

Click the Loom video option, then enter a URL and a title for the tile.

## Save your dashboard

When you're happy with the layout, hit **Save**. You can see every saved dashboard in your project under **Browse → All dashboards**.

## Add filters

Dashboard filters let you change the data in every tile at once. In edit mode, click **Add filter**, pick a field and a value, and hit **Apply**; save the dashboard to keep the filter for everyone who opens it.

Filters do a lot more than that — temporary filters that only you see, filters that viewers must fill in before the dashboard loads, and per-tile control over which fields a filter applies to. See [dashboard filters](/explore/dashboards/filter) for the full behavior.

## Add tabs

As a dashboard grows it may end up supporting multiple teams and use cases. Tabs organize it.

<Tip>
  ### Use tabs in these scenarios

  * **Break up high level goals or themes**, e.g. Revenue, Retention, Engagement
  * **Separate views for different audiences**, e.g. Executive Summary vs. Team-level detail
  * **Avoid clutter and performance issues in dashboards with lots of tiles**, e.g. split 30+ charts into three tabs based on priority or groupings like the first and second bullets above
</Tip>

While editing, click **Add tile**, then **Add tab**.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/tabs-new.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=63ec038b1c58868d5022a8b634560973" alt="The Add tab option in the Add tile menu" width="2528" height="1603" data-path="images/explore/dashboards/tabs-new.png" />
</Frame>

Give the tab a unique name.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/tabs-name.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=7cc0fbcf38c701d91127dead725d82e5" alt="Naming a new dashboard tab" width="1017" height="675" data-path="images/explore/dashboards/tabs-name.png" />
</Frame>

Once created, the tab is a fresh canvas you fill just like any other dashboard.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/tabs-added.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=4b7de2c468dfd825d3f05ec10dd5880f" alt="A dashboard with two tabs" width="2532" height="1605" data-path="images/explore/dashboards/tabs-added.png" />
</Frame>

### Editing and removing tabs

To edit a tab, click the edit icon to the right of its name while in dashboard edit mode. From there you can rename the tab or remove it.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/tabs-edit.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=9a1b78b9da5b7e1b26ea407ed7bfec69" alt="The tab edit menu with rename and remove options" width="2530" height="1612" data-path="images/explore/dashboards/tabs-edit.png" />
</Frame>

If the tab has content in it, you get the option to transfer that content to another tab, so you can remove the tab and keep the tiles.

<Frame>
  <img src="https://mintcdn.com/lightdash/y8j5qvbhHoP381ni/images/explore/dashboards/tabs-transfer-content.png?fit=max&auto=format&n=y8j5qvbhHoP381ni&q=85&s=755da17339842692070011351d084a7a" alt="Choosing a destination tab when removing a tab that has content" width="610" height="438" data-path="images/explore/dashboards/tabs-transfer-content.png" />
</Frame>

### Sharing tabs

Tab content shares just like a regular dashboard. A shareable link navigates straight to the tab that was active when you created it.

### Embedding dashboards with tabs

When you embed a dashboard that has tabs, every tab is appended into a single dashboard, so the embed shows the content of all tabs at once.

## Hide tile headers

Hiding a tile's header gives a cleaner look and more space to the chart content.

1. Enter edit mode by clicking **Edit dashboard**.
2. Click the tile you want to modify and select **Edit tile content**.
3. Click the eye icon next to the tile title to hide it.

The tile now displays without its header. Repeat the steps and click the eye icon again to bring it back.

## Share your dashboard

Copy the URL, or press the 🔗 button, to share the dashboard with other people in your organization. To share it with a particular set of filter values applied, see [sharing a dashboard with filter overrides](/explore/dashboards/filter#sharing-a-dashboard-with-filter-overrides).
