Tableau visualizations and text wrapping

Learn how to format a Tableau data visualization and embed it on an Information Details page. You can also wrap text around the visualization.

The Information Details content type can be used to display data dashboards built in Tableau along with text to tell a story through data. If you have a mixture of visuals with short pieces of text, it’s recommended that you use the Information Details visual story subtype so you can take full advantage of text wrapping around larger data visualizations.

Formatting a data visualization in Tableau

If you want to add a Tableau visualization to an Information Details page, it’s important to first format the data dashboard properly in the Tableau software. This enables you to embed a data visualization in a responsive, flexible environment. The size of the data visualization will change as the screen size changes based on the device you use.

Tableau has a feature where for a single dashboard you can create different device layouts — phone, tablet and desktop. The text wrapping feature for data visualizations on Information Details pages is designed to be used with that functionality. You also need to set your dashboard layouts to have a flexible width in Tableau. If you don’t do this, and you use fixed dashboard widths instead, it may cause problems with text wrapping on an Information Details page.

HINT: If you use a fixed desktop size in a Tableau visualization, it’s better to embed it as an iframe on an Information Details page.

Here’s how we recommend setting up your visualization in Tableau so it has device layouts and a flexible width:

1. Create a Dashboard and add your worksheet(s) to the Dashboard. (Note: We do not recommend using Stories because they do not support device layouts.)

2. In the Dashboard settings, add a desktop, tablet, and phone layout

3. In each layout under “Size”, select “Fit width.”

4. Pick a height — it doesn’t have to be the same in each layout

After you publish the data visualization online (for example, to Tableau Public), we recommend testing the visualization at extreme sizes to make sure parts of it aren’t cut off at smaller screens. Make sure:

• Your desktop layout is OK when resized to 801 pixels wide

• Your tablet layout is OK when resized to 501 pixels wide

• Your phone layout is OK when resized to 280 pixels wide

Mass.gov will display desktop, phone, or tablet layout based on the size at which the visualization is being embedded on the page.

Adding a data visualization to an Information Details page

Section Content

Under the Content tab, choose the “Add Tableau Visualization” button in the Section Content field. This will open several fields that allow you to control how your visualization looks on the page.

Enter the URL of your Tableau visualization in the Visualization URL field. To get the URL:

1. In Tableau Public click on share

2. Copy the link URL

3. Paste the link URL into a separate document and remove everything after, and including, the “?.” For example: https://public.tableau.com/views/Samplevisualizations/Sample1?:language=en&:display_count=y&:origin=viz_share_link

4. Paste the link into the Visualization URL field in the CMS

Click on the share icon to get the URL for your Tableau visualization.

In the Administrative title, say what your visualization shows. This optional field will only be visible to you and to other authors to help you identify the visualization.

You can also enter a caption that will appear below the visualization in the Caption field. The caption is limited to 500 words. The caption is optional, but it's one of the main ways you can provide a text description of the visualization (including as a text alternative for people using screen readers, who may not be able to access the Tableau visualization). The caption can also be used to:

• Elaborate on details about what appears in the Tableau visualization

• Cite the source of the data

• Provide a link to more information about the data, a glossary, or a web page where visitors can dig deeper into the data

Next, choose the Display size. This controls the size of the visualization on the page, relative to the size of the screen. In other words, the actual size will vary based on the size of the screen the page is being viewed on. The options are:

• Small: Up to 400 pixels wide, phone layout

• Medium: Up to 600 pixels wide, phone and tablet layout

• Large: Up to 850 pixels wide, all 3 layouts

• X-Large: Up to 1,200 pixels wide, all 3 layouts. Always uses the full width of the page.

Alignment lets you choose whether the visualization is aligned to the left or right side of the page.

If you want to wrap text around the visualization, check the box in the Wrapping field, then click on the “Add rich text” button, and enter the text you want to wrap around the data visualization. The text will only wrap if there is room, so it’s best to choose a Large or smaller Display size.

A small data visualization with wrapped text on a visual story template as seen on a desktop.

A medium visualization with wrapped text on a visual story template as seen on a desktop.

A large data visualization with wrapped text on a visual story template as seen on a desktop.

An extra large visualization on a visual story template as seen on a desktop.

If you need help with Tableau visualizations, request support through ServiceNow.

Was this article helpful?