Adding text to a dashboard helps you share a story alongside your data. You can use text containers to create headers or add descriptions. The container settings let you adjust the size, position, padding, background color, or even turn the container into a link button.
Select the text within a container to open the text editor, where you can easily adjust the text style. For more detailed design options, you can also use the HTML editor. The HTML editor is flexible and allows you to apply CSS styles to your dashboard page.
In this article
1. Text Container
Text containers enhance dashboards by providing context and clarity. Here's how you can use them:
- Headers: Create clear section titles to guide the viewer through the dashboard.
- Insights and Information: Share key takeaways, explanations, or summaries of the data presented.
- Navigation Links: Add buttons to make it easier to move around the dashboard.
- Backgrounds: Use a blank text container with background colors to create visual sections.
- CSS Styling container: It is common to use a text container to add HTML and CSS, applying styles to the dashboard by defining specific classes or IDs.
Add Text to your Dashboard
The text editor becomes available as soon as you insert a text container. Options in this editor include font, color, size, etc.
- Select the Text container option.
- On the dashboard canvas, click the text container three times to access the text editor menu.
- Customize your text container and enter the text.
- Save
To access the text container option, switch to edit mode.
- Select the Text container option
- Paste, or type in your text
- Highlighting the text automatically opens the text editor
- Edit text styles in the editor
- Save the dashboard
- TIP: Changing the options in the text editor before typing, formats the text as you type
It is good practice to SAVE your changes regularly as you make progress.
HTML Editor
The text container includes an HTML editor. The editor offers great design flexibility for those experienced in HTML and CSS. For more advanced styling advice, please review the Dashboard Style and Assets article.
- The container includes an HTML editor
- Click to open the editor and paste your HTML with inline CSS
- Save the dashboard after changes
Add an Image in a Text Container
Adding an image in a text container allows you to style the image as you need.
In this example, a text container is added to the dashboard. Click the HTML editor to add an <Img> tag and paste your image link in the src attribute.
Example: <img src="paste your image url here"/>
- Creating a Text container and click on Edit HTML
- Insert the <Img> tag
- Paste a Harmoni Assets or open source image link in the src attribute
- Click SUBMIT
Note: Images exported to PowerPoint from a text container adjust to the container size. Learn more about exporting dashboards to Excel and PowerPoint.
2. General Settings
Selecting a container type, opens the General settings menu. The setting options displayed are based on the selected container type. Let's look at the options available for text containers.
Container Name and Type
Naming the container is useful when it's necessary to manage the visibility of containers. This can be done via personalization keys. You can also see the container type you have selected.
- After selecting the container, rename the container in the Name field
- The container type is listed next to Type
Note: The content menu is not relevant for Text containers
Size and Position
Dragging and resizing containers by using the mouse pointer is an easy way to position and adjust the container, but the size and position options allow for precise placement.
- Width and Height control the size of the container.
- X (from left) and Y (from top) control the horizontal and vertical placement in the dashboard canvas.
Lock display locks the size dimensions of the containers. This ensures that when the screen size changes or the browser scaling is adjusted, the alignment and overall design remain as intended.
- You can resize or move using the mouse
- Using Lock display keeps proportions when resizing the container
- You can specify the size by adjusting the width, height, x, or y settings
Note: The lock display works best with fixed font sizes (e.g., 12pt or 12px) as it adjusts according to its container. Using dynamic sizes (e.g., 1vw or 1vh), which scale with the browser size, might lead to extra scroll bars if the container doesn’t have enough space.
Padding
Use Padding options to create extra space around the container's content.
- Expand Padding
- Enter the required values
Arrange
Dashboards often have multiple containers and the ability to organize them easily is important. In the Arrange section, you can use the layering options like Send to Front, Bring Forward, Send Backward, or Send to Back to stack containers in the order you need.
Learn more about ordering layered containers.
- Create a text container to use as the background
- Stack your containers together
- Expand the Arrange option and select Send to back
Background
To set the background color, use the color picker, or for specific colors, enter the Hex value. Adjust the transparency from 0% (transparent) to 100% (opaque).
- Use the color picker to set the background color
- Alternatively, enter the Hex value
- Adjust the background opacity
- Save
Link
Custom Link allows you to link to other dashboard pages, story views, websites, and documents.
In the example below, the text container is linked to another dashboard page.
- Navigation headings are created using text containers
- Select a text container and expand Link
- To link to a dashboard page, click the dashboard link icon
- Select the dashboard page from the list
- Save
- Clicking the text heading takes you to the linked dashboard page
Where to from here?
Learn more about Harmoni