You can customize a dashboard using CSS (Cascading Style Sheets). CSS lets you control the visual style of the dashboard. For example, you can change background colors, text colors, and chart appearance.
Open the CSS editor
- Go to BI Builder.
- Open a dashboard.
- Click Edit.
- Click Edit Dashboard.
- Click the three dots menu.
- Select Edit CSS.
Paste your CSS code into the editor. Changes apply right away.
Use CSS to style your dashboard
You can apply CSS to the entire dashboard or to a specific chart. For example, to change the background color of all headers, use the following code:
.header-title { color: #fcfafa; background-color: #02b0f5 }
-
header-title: Targets the header element.
-
color: #fcfafa: Sets the text color.
-
background-color: #02b0f5: Sets the background color.
To hide the name of a specific chart, you need its identifier. Select a chart and view the code in your browser. Find the necessary code line and copy the identifier:
-
data-test-chart-id="65": Chart ID.
-
data-test-viz-type: Chart type.
-
data-test-chart-name: Chart name.
Enter the code in the CSS editor to hide the name of the chart:
div[data-test-chart-id="139"] .header-title { visibility: hidden }
-
div[data-test-chart-id="65"] .header-title: Targets a specific chart
-
visibility: hidden: Hides the title.
Common CSS templates
| CSS code | Action |
|---|---|
body { color: #f7f9fa; background-color: #45d1ff }
|
Changes dashboard background |
.dashboard-component { color: #45d1ff }
|
Changes component color |
.header-title { color: #f7f9fa; background-color: #45d1ff }
|
Changes header style |
.dashboard-markdown .dashboard-component-chart-holder { overflow-y: hidden; overflow-x: hidden }
|
Hides scrollbars |
.editable-title { display: none; justify-content: flex-end;!important }
|
Hides all chart titles |
div[data-test-chart-id="000"] .header-controls { visibility:hidden }
|
Hides chart controls |
div[data-test-chart-id="000"] .header-title { visibility: hidden }
|
Hides a specific chart title |
div[data-test-chart-id="000"] { border: thick double #45d1ff }
|
Adds a border to a chart |
In brief
- You can customize the dashboard design with CSS (Cascading Style Sheets). Use CSS to change colors, backgrounds, and other visual elements.
- Go to BI Builder, select a dashboard, and click Edit. Click Edit Dashboard > three dots button > Edit CSS. Paste your code into the editor. Changes apply immediately.
- Some styles require a chart ID. To find it, select the chart and inspect it in your browser’s developer tools.
