Dashboard Customization

Overview

Customize your dashboards to improve the user experience and better align with the look and feel of your organization.

Dashboard Layout Elements

Superset has a variety of layout elements that can be used to organize and segment your content on dashboards. To add one, simply navigate to the LAYOUT ELEMENTS tab and drag and drop it to your dashboard:

Hover over the element, to view the options available - Note that you can either use a Transparent or White background for Rows, Columns and also Headers:

Let's take a closer look on the elements available:

Adding Images to Dashboards

Superset allows you to add images based on URL to your dashboard.

There are two different ways to add an image to your dashboard:

Using HTML

This is the easiest way to add an image to your dashboard:

1. Add a Text element to your dashboard.

2. Create a new <img> tag on it:

<img src="{{Image URL}}" width="{{Width}}" height="{{Height}}">

Replace:

• {{Image URL}} with a link to your image (make sure that the image is accessible from the internet).

• {{Width}} with the desired image width (either in px or %).

• {{Height}} with the desired height (either in px or %).

Note that, if you set the width and height to 100%, the image size would fit the Text block, allowing you to control the image size via the Text element size:

Using Markdown

1. Add a Text element to your dashboard.

2. Use below syntax to add the image:

![{{Image Name}}]({{Image URL}})

Replace:

• {{Image Name}} with a title for this image (this can to be used on CSS to style it).

• {{Image URL}} with a link to your image (make sure that the image is accessible from the internet).

Adding Tables to Dashboards

It's also possible to add tables to your dashboards, using HTML with the Text element. For example:

<table>
  <tr>
    <th>Header 01</th>
    <th>Header 02</th>
  </tr>
  <tr>
    <td>First Row First Column</td>
    <td>First Row Second Column</td>
  </tr>
  <tr>
    <td>Second Row First Column</td>
    <td>Second Row Second Column</td>
  </tr>
</table>

Table styling (borders, colors, size, etc) can also be configured via CSS. 

Color Palettes

As part of the chart creation process, creators specify a color palette for it. On the dashboard level, it is possible to specify a single categorical color palette that would be used by all charts on your dashboard - the chart color palette would still be used when viewing the chart directly, or on other dashboards. Today, the sequential color palette is specified at the chart level and can be configured from the "Chart Builder" view of the compatible charts (e.g., World Maps, Heatmap, Country Map, deck.gl Polygon). 

To set up a dashboard-level color palette:

1. Access your dashboard.

2. Click on EDIT DASHBOARD, on the top right corner.

3. Click on the three ellipses on the top right corner > Edit properties.

4. Choose a palette under the COLOR SCHEME drop-down.

5. Save changes.

Superset would use the same color for metrics/dimensions displayed on multiple charts (in the same tab). However, if you want to have more control over the columns that are applied to each dimension, you can manually specify the colors (using  hexadecimal or RGBA code) on the dashboard JSON metadata. To do so:

1. Access the dashboard.

2. Click on EDIT DASHBOARD, on the top right corner.

3. Click on the three ellipsis (...) > Edit properties.

4. Expand the ADVANCED section.

5. Create a new section inside the JSON METADATA named label_colors, specifying the desired colors for each metric/dimension. For example:

Creating a New Color Palette

Team Admins can add and configure custom color schemas to create charts and dashboards that match your brand’s look and feel.

There are two types of color palettes you can create in Preset:

• Categorical: Color scales that distinguish between categories that don’t have an intrinsic order.

• Sequential: Gradient color scales that go from bright to dark or the other way around.

Walkthrough:

To add a new color palette: 

1. From the Preset Manager page, select Manage Team. Under the General tab, Click on +Add New to create a new color palette.

2. Assign a “Name” to your color palette and choose a palette type.

3. Define color schema. 

   1. For a categorical color palette: Add at least 6 colors to create a palette
      

   2. For a sequential color palette: Define the two colors to make the gradient. You may also add a middle color as an option.

4. When finished, click to Save.

Setting a Default Color Palette

To set a default color palette:

1. From the Preset Manager page, select Manage Team. 

2. Under the General tab, go to the dropdown "Default categorical color palette"

3. Select the color palette which will be used as the default for categorical charts types.

4.  Repeat for the sequential drop down:

   • Go to the dropdown "Default sequential color palette"

   • Select the color palette check will be used be default for sequential charts types.

Sequential Chart types include:

• Calendar Heatmap

• Country Map

• deck.gl Polygon

• Heatmap

• World Map

All other chart types are Categorical.

Customizing Dashboards with CSS

Please see the related documentation page.