Dashboard Customization
  • 23 Feb 2024
  • 4 Minutes to read
  • Dark
    Light

Dashboard Customization

  • Dark
    Light

Article summary

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:

Adding layout elements to dashboards.gif

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:

Layout element options.gif

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

Tabs_Screenshot.png


Tabs are very useful to segment your charts into different groups.

Header_Screenshot.png


Header is used to add titles.

Markdown_Screenshot.png


Text can be used to add text and advanced features, such as images and HTML content.

Divider_Screenshot.png


Divider is useful to isolate parts of your dashboard.

Rows_Columns_Screenshot.png


Rows and Columns can be added to further configure the charts layout.

Adding Images to Dashboards

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

Want to add an image from your computer?

You can upload the desired image to a Cloud hosting application (such as Google Drive) to add it to your dashboard. After uploading it to Google Drive:

  1. Change the sharing settings to Anyone with the link.

  2. Copy the image URL - it should be something according to this structure: https://drive.google.com/file/d/{{FileID}}/view?usp=sharing.

  3. Get the {{FileID}} from the link, and replace it on this structure: https://drive.google.com/uc?export=view&id={{FileID}}. Use this link to add the image to the dashboard, following the steps below.

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).

Markdown syntax to add image on dashboard.gif

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.

dashboard color scheme.gif

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

Color Palette Builder

The Color Palette Builder is only available on the Enterprise plan.

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


Was this article helpful?