---
schema_version: "1"
id: 63a9abbefd8b69c884d6a5c2765c6ed1240423abbda2047d7430551ff865d182
title: Format and Customize Tableau Pulse
collection: tableau
version: current
locale: en-us
portal_url: https://docs.salesforce.com/tableau/current/en-us/api/embedding_api/docs/embedding_api_pulse_theme.md
canonical_url: https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_pulse_theme.html
source_site: help.tableau.com
content_type: documentation
content_hash: 35112203cac49cd91545976fc36dc89d8c0544d4caf3dc607f60b461ee0f7c49
description: Documentation for the Tableau Embedding API
---
# Format and Customize Tableau Pulse

  

You can use the Embedding API to customize the look and feel of your embedded Tableau Pulse metrics by changing the font and colors used to render the metric in your web apps and web pages. The Embedding API provides a `<theme-parameter>` for the `<tableau-pulse>` web component that you can place in your HTML code.

For information about using Tableau Pulse and creating metric definitions, see [Create Metrics with Tableau Pulse](https://help.tableau.com/current/online/en-us/pulse_create_metrics.htm).

**Important:** To embed Tableau Pulse metrics in your web page or application, you must configure Tableau and your web application to use connected apps for authentication. For information about using connected apps, see [Authentication and Embedded Views](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_auth.html). and [Use Tableau Connected Apps for Application Integration](https://help.tableau.com/current/online/en-us/connected_apps.htm).

The following information will help get you started embedding metrics with Tableau Pulse.

* * *

## Pulse `theme-parameter` elements

The Tableau Embedding API provides a `<theme-parameter>` child element that you can apply to the `<tableau-pulse>` component (or `Pulse` object) to change the colors and fonts used.

There are two categories of theme parameters you can specify for the Pulse metric. The first category includes the _page-level_ parameters, such as `backgroundColor` and `foregroundColor` and fonts that apply to the whole Pulse layout component. The second category includes the colors you can apply to the Pulse charts, such as `axisGrid` and `bar`. The page-level theme parameters have two attributes, the name of the property and its value. The chart parameters have a type attribute (`type="chart"`) in aaddition to the name and value attributes of the property.

### Add a `theme-parameter` to the Tableau Pulse web component

The following example shows how you could specify a background color for the Pulse metric, by adding a `<theme-parameter>` element to the Pulse web component.

```

<tableau-pulse id="tableauPulse" 
   src='<Your_Tableau_Pulse_URL>' 
   layout="default">
   <theme-parameter name="backgroundColor" value="#fef"></theme-parameter>
</tableau-pulse>

```

For more information about changing background and foreground colors and chart properties, see [Change colors for the Pulse metric](#change-colors-for-the-pulse-metric) and the list of [page-level](#pulse-theme-page-properties) and [chart properties](#pulse-theme-chart-properties) you can customize.

### Add a `theme-parameter` to Tableau Pulse using JavaScript

The following example also shows how you can specify a background color, this time using JavaScript to add the `<theme-parameter>` element to the Pulse web component.

```
// assumes a Pulse object has been created
const tableauPulse = document.querySelector("tableau-pulse");

// create a theme-parameter element
const theme1 = document.createElement("theme-parameter");
theme1.setAttribute("name", "backgroundColor");
theme1.setAttribute("value", "#fef");
tableauPulse.appendChild(theme1);

```

## Change fonts for the Pulse metric

You can use the theme parameter to change the font used in the Pulse metric. You can select the font to use from [Google Fonts](https://fonts.google.com). The Pulse metric supports a single font, but you can also specify the base font size (or smallest size) from a range of 12 to 18, inclusively. The base size is the smallest size font used for the range of text blocks and headings in the Pulse metric. The syntax for specifying the font and font size is as follows:

```
<theme-parameter name="fontCssUrl" value="URL"></theme-parameter>
<theme-parameter name="fontSize" value="SIZE"></theme-parameter>
```

The specify a font, provide a value for `fontCssUrl`. The value is the URL is to the stylesheet for the Google Font you want to use. To get the URL, go to [Google Fonts](https://fonts.google.com).

1. Choose the font you want to use for the Pulse metric (for example, Bebas Neue).
2. Click the **Get Font** button.
3. Click the **Get Embed Code** button.
4. Copy the URL for the font from the embed code sample.

* * *

![Google Fonts](/current/api/embedding_api/en-us/assets/pulse_google_fonts.png)

* * *

For example, the following embedded Pulse metric uses the Bebas Neue font, with a base size of 18 points.

```
<tableau-pulse id="tableauPulse" 
        src='https://online.tableau.com/pulse/site/mysite/metrics/3ec1437f-d40d-4a5d-9363-aa22cd862838' 
        layout="default">
        <theme-parameter name="fontCssUrl" value="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"></theme-parameter>
        <theme-parameter name="fontSize" value="18"></theme-parameter>
</tableau-pulse>
```

* * *

## Change colors for the Pulse metric

There are two categories of color parameters you can specify for the Pulse metric. The first category includes the _page-level_ parameters, such as `backgroundColor` and `foregroundColor` that apply to the whole Pulse layout component. The second category includes the colors you can apply to the Pulse charts, such as `axisGrid` and `bar`.

You can use any valid CSS color, including predefined color names (`red`, `cyan`, `chartreuse`, etc.), or RGB, HEX, HSL, RGBA, HSLA values. For example, the following values could be used for the color red:

- `"red"`
- `"#f00"`
- `"#ff0000"`
- `"rgb(255, 0, 0)"`
- `"hsl(0, 100%, 50%)"`

* * *

The following settings set the page-level foreground color and the axis grid line for line and bar charts.

```
<theme-parameter name="foregroundColor" value="#808"></theme-parameter>
<theme-parameter type="chart" name="axisGrid" value="blue"></theme-parameter>
```

For more information about specifying colors, see [CSS Colors](https://www.w3schools.com/css/css_colors.asp).

* * *

## Pulse theme page properties

[![Axis labels](/current/api/embedding_api/en-us/assets/pulse_fore_color.png "Page properties for theme")](/current/api/embedding_api/en-us/assets/pulse_fore_color.png)

* * *

| Page parameter name | Accepted Values | Description |
| --- | --- | --- |
| `fontCssUrl` | URL | The URL to the [Google Fonts](https://fonts.google.com/) stylesheet for the desired font. For example, `"https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"`. |
| `fontSize` | integer | The base font size in pixels. The size must be between 12 and 18, inclusively. For example, `<theme-parameter name="fontSize" value="16"></theme-parameter>` |
| `backgroundColor` | CSS\_Color | The background color of the entire layout. Accepts any valid CSS color. You can use predefined color names (red, cyan, chartreuse, etc.), or RGB, HEX, HSL, RGBA, HSLA values. For example, `<theme-parameter name="backgroundColor" value="#cccccc"></theme-parameter>` sets the background color as a light gray. |
| `backgroundColorOpaque` | CSS\_Color | The opaque background color. Used on components that should not use the background color when the background is “transparent.” Accepts any valid CSS color other than “transparent.” |
| `foregroundColor` | CSS\_Color | The color of text that exists on top of the background. Be sure to select a value that has sufficient contrast with the background color. |

<table><tbody><tr><td><strong>Note:</strong> To set the background color (<code class="language-plaintext highlighter-rouge">backgroundColor</code>) as transparent, specify the CSS color as <code class="language-plaintext highlighter-rouge">"transparent"</code>. Doing so enables <code class="language-plaintext highlighter-rouge">backgroundColorOpaque</code> to work as intended. That is, <code class="language-plaintext highlighter-rouge">backgroundColorOpaque</code> is used for components that should not use the background color when the background color is transparent. The value <code class="language-plaintext highlighter-rouge">"rgba(0,0,0,0)"</code> would still apply a transparent background color, but the logic that tells <code class="language-plaintext highlighter-rouge">backgroundColorOpaque</code> to apply only works when <code class="language-plaintext highlighter-rouge">"transparent"</code> is provided as the value for <code class="language-plaintext highlighter-rouge">backgroundColor</code>.</td></tr></tbody></table>

* * *

## Pulse theme chart properties

The names for line and bar chart properties are organized into two categories (group names, and detailed names). To set the properties, you can specify the name of the parameter group (`axis`, for example) or one of the detailed names in that group (`axisGrid`, `axisGridActive`, or `barAxis`). The group name sets the default color for the detailed properties, unless those detailed properties are specified. Note that the order the properties appears makes a difference. If a detailed property is set, followed by the group property, the named group property is applied.

* * *

### Line chart

(_Click on the image to open the image in a separate tab or window._)

[![Axis labels](/current/api/embedding_api/en-us/assets/pulse_axis_grid_labels.png "Theme elements for Pulse axis")](/current/api/embedding_api/en-us/assets/pulse_axis_grid_labels.png)

* * *

### Bar charts

(_Click on the image to open the image in a separate tab or window._)

[![Axis labels](/current/api/embedding_api/en-us/assets/pulse_bar_labels.png "Theme elements for Pulse axis")](/current/api/embedding_api/en-us/assets/pulse_bar_labels.png)

* * *

### List of group and detailed properties

To set the properties, you can specify the name of the parameter group (`axis`, for example) or one of the detailed names in that group (`axisGrid`, `axisGridActive`, or `barAxis`). The group name sets the default color for the detailed properties, unless those detailed properties are specified. Note that the order the properties appear makes a difference. If a detailed property is set (`axisGrid`), followed by the group property (`axis`), the named group property overrides the detailed property.

| Chart parameter group name | Chart Detailed names |
| --- | --- |
| `axis` | `axisGrid`, `axisGridActive`, `barAxis` |
| `axisLabels` | `axisLabel`, `barAxisLabel` |
| `primary` | `bar`, `currentValueDotBorder`, `line` |
| `primaryLabel` | `barLabel`, `currentValue` |
| `average` | `barAverage` |
| `averageLabel` | `barLabelAverage` |
| `cumulative` | `barCumulative` |
| `cumulativeLabel` | `barCumulativeLabel` |
| `favorable` | `barFavorable`, `changeFavorable` |
| `favorableLabel` | `barLabelFavorable` |
| `unfavorable` | `barUnfavorable`, `changeUnfavorable` |
| `unfavorableLabel` | `barLabelUnfavorable` |
| `unSpecified` | `barUnspecified` |
| `unSpecifiedLabel` | `barLabelUnspecified` |
| `sum` | `barSum` |

For the bar and line chart properties, you need to specify the type (“`chart`”) in addition to the name of the property.

```
<theme-parameter type="chart" name="axisGrid" value="#808"></theme-parameter>
```

* * *

## Example theme for a Tableau Pulse web component

The following example shows a Tableau Pulse web component that uses the `<theme-parameter>` to customize the fonts, colors, and labels. You can copy this code and modify it to suit your embedded application. You need to provide the URL for your Tableau Pulse metric.

```
    <tableau-pulse id="tableauPulse" 
      src='<Your_Tableau_Pulse_URL>' 
      layout="default">
      <theme-parameter name="fontCssUrl"
        value="https://fonts.googleapis.com/css2?family=Faculty+Glyphic&display=swap"></theme-parameter>
      <theme-parameter name="fontSize" value="18"></theme-parameter>
      <theme-parameter name="backgroundColor" value="#fef"></theme-parameter>
      <theme-parameter name="backgroundColorOpaque" value=""></theme-parameter>
      <theme-parameter name="foregroundColor" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="axisGrid" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="axisGridActive" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="axisLabel" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="bar" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="barAverage" value="#606"></theme-parameter>
      <theme-parameter type="chart" name="barAxis" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="barAxisLabel" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="barCumulative" value="#5B3C88"></theme-parameter>
      <theme-parameter type="chart" name="barCumulativeLabel" value="#5B3C88"></theme-parameter>
      <theme-parameter type="chart" name="barFavorable" value="#88BE88"></theme-parameter>
      <theme-parameter type="chart" name="barLabel" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="barLabelAverage" value="#606"></theme-parameter>
      <theme-parameter type="chart" name="barLabelFavorable" value="#339999"></theme-parameter>
      <theme-parameter type="chart" name="barLabelUnfavorable" value="#999933"></theme-parameter>
      <theme-parameter type="chart" name="barLabelUnspecified" value="#875787"></theme-parameter>
      <theme-parameter type="chart" name="barSum" value="#875787"></theme-parameter>
      <theme-parameter type="chart" name="barUnfavorable" value="#AF3C4B"></theme-parameter>
      <theme-parameter type="chart" name="barUnspecified" value="#875787"></theme-parameter>
      <theme-parameter type="chart" name="changeFavorable" value="#88BE88"></theme-parameter>
      <theme-parameter type="chart" name="changeUnfavorable" value="#AF3C4B"></theme-parameter>
      <theme-parameter type="chart" name="currentValue" value="#fff"></theme-parameter>
      <theme-parameter type="chart" name="currentValueDot" value="#B200FF"></theme-parameter>
      <theme-parameter type="chart" name="currentValueDotBorder" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="dotBorder" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="hoverDot" value="#B200FF"></theme-parameter>
      <theme-parameter type="chart" name="hoverLine" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="line" value="#808"></theme-parameter>
      <theme-parameter type="chart" name="projection" value="#468246"></theme-parameter>
      <theme-parameter type="chart" name="range" value="#fef"></theme-parameter>
    </tableau-pulse>


```

* * *

The following shows what the example Pulse theme would look like when embedded in a web page.

[![Example Pulse Theme](/current/api/embedding_api/en-us/assets/pulse_example_theme.png "Example Pulse theme")](/current/api/embedding_api/en-us/assets/pulse_example_theme.png)

  

#### On This Page