How-to
How to use KPI cards, titles and text on a dashboard
Highlight a number with a comparison and an icon, and organize the dashboard with titles, formatted text, images and buttons that open other tabs.
Cards highlight one number, such as the month’s revenue, with the change from the previous month. Titles and text organize the dashboard and explain what readers are looking at.
When to use them
- Card: at the top of the dashboard, for the 3 or 4 numbers everyone looks for first.
- Title: to separate blocks, such as Sales and Finance, inside the same tab.
- Text (Markdown): to explain how to read the charts, note where the data comes from or create buttons that open other tabs.
Create a KPI card
A card is a regular chart with the Card Chart type.
-
Create a chart with one series (see How to create and edit a chart).
-
Under Design, choose Card Chart (the banknote icon).
-
Click the series pencil to open Edit Series. With the card type, the window gets two extra sections: Card Comparison and Card Icon.
-
Pick the comparison and the icon and click Save.
-
Save the chart with Ctrl + S and place it on the dashboard.
What the card shows
| Part | Where it comes from |
|---|---|
| Name | The series name. |
| Big number | The value of the chart’s last period, in the series Value Formatting. |
| Change | The last period compared with the one before it. Green when it goes up, red when it goes down. |
| Icon | The chosen icon, in the series Custom Color. |
With two or more series, the chart shows one card per series, side by side.
Card options
| Option | Choices | Default |
|---|---|---|
| Card Comparison | None, Percentage, Value | Value |
| Card Icon | 20 icons, such as upward trend, bar chart, dollar sign and piggy bank. | Upward trend |
Example: revenue and profit for the month
On the Executive view dashboard of the sample project, two cards open the screen:
- Revenue in the period: R$ 6,184,875.00 in December 2026, R$ 782,665.00 more than in November.
- Gross profit in the period: R$ 2,383,185.00 in December, R$ 344,888.00 more than in November.
To show year-to-date revenue instead of December revenue, turn on Calculate accumulated series value in the series. The big number becomes the sum from January to December.
Add a title or text
-
Open the dashboard in Edit mode.
-
Hover over the round + button in the corner of the screen and choose Add Title or Add Markdown. The element is added at the end of the dashboard.
-
Title: click the text and type. Use the arrows next to the title to make it bigger or smaller, from H1 to Small.
-
Text: click Edit on the block. Type and format with the toolbar, then click Save.
-
Drag the element into place and save the dashboard with Ctrl + S.
Text formatting
| Feature | How to use it |
|---|---|
| Headings | The T menu on the toolbar: Heading 1 to Heading 3. |
| Bold and Italic | The B and I buttons. |
| Lists | Bulleted list and Numbered list. |
| Quote | Highlights a sentence, such as a warning. |
| Insert link | Links a passage to a web address. |
| Insert button | Creates a button that opens another tab of the dashboard. In Destination view, pick a view or Whole tab. |
Look and images
In the block’s Options menu, open Advanced Settings to change Text Size, Text Alignment, Text Color and Background Color. That is also where Click to add image is: up to 4 images per block, up to 1 MB each, in JPEG, PNG, GIF or WebP.
Watch out
- Showing only the last period removes the card comparison. With Show only last period on, the card has no previous period and the change disappears.
- The card shows the last period, not the total. For the period total, use Calculate accumulated series value.
- A block with images cannot be edited with the pencil. When the block has images, the Edit button disappears; change the content in Advanced Settings.
- Text does not change with filters. Titles and text are fixed. For text that comments on the numbers for the period, use AI analysis.
- Check everything in View mode before publishing.
- In the English version of Hubviz Studio, a new title starts as Novo Título and a new text block starts with sample text in Portuguese. Replace it with your own text.