The article explains how to use {value} and {percentage} tokens in the Storyboard chart Format field to control what appears on data labels, including combining them with any separator or stacking them on separate lines. Tokens must be lowercase and in curly brackets to render correctly.
Estimated reading time: 4 minutes
Prerequisites: Introduction to Chart Types in One Model - you should already have a chart with data labels enabled - Basic Chart, Pie Chart or Stacked Bar Chart.
What you'll learn
By the end of this article, you'll be able to:
- Construct a data label format using
{value}and{percentage}tokens. - Combine tokens with plain text and separators to produce custom label displays.
- Stack a value and percentage on separate lines within the same label..
Overview
When you enable data labels on a Storyboard chart, One Model gives you a Format input field where you control exactly what appears on each label. You can display the raw value, the percentage, or both, and you can combine them with any plain text or punctuation you choose.
The format field accepts two special tokens:
| Token | What it displays |
|---|---|
{value} |
The raw data value for that segment |
{percentage} |
The percentage that segment represents of the whole |
Important: Both tokens must be written in lowercase and wrapped in curly brackets exactly as shown.
{Value}or{VALUE}will not be substituted - they'll appear as literal text on the label.
How the format field works
Anything you type into the format field appears on the label exactly as written, except for {value} and {percentage}, which are replaced by the corresponding numbers at render time.
This means you can:
- Use either token on its own.
- Combine both tokens with a separator between them.
- Add plain text before or after a token (for example, a label prefix or unit).
Format examples
The table below shows common format patterns and what they produce on the label.
| Format entered | Label displays |
|---|---|
{value} |
The raw value only (e.g. 142) |
{percentage} |
The percentage only (e.g. 23%) |
{value}, {percentage} |
Value and percentage separated by a comma (e.g. 142, 23%) |
{percentage}, {value} |
Percentage first, then value (e.g. 23%, 142) |
{value} - {percentage} |
Value and percentage separated by a dash (e.g. 142 - 23%) |
{percentage} - {value} |
Percentage first, dash separator (e.g. 23% - 142) |
{value} {percentage} |
Value and percentage with a space between (e.g. 142 23%) |
{percentage} {value} |
Percentage first, space separator (e.g. 23% 142) |
You are not limited to these patterns. Use any separator - comma, dash, slash, pipe, or plain text - and arrange the tokens in whichever order suits your chart.
Stacking value and percentage on separate lines
If you want the value and percentage to appear on top of each other rather than side by side, use a line break between the two tokens.
To add a line break in the format field:
- Click into the Format input field.
- Type
{value}. - Press Enter on your keyboard.
- Type
{percentage}.
The label will display the value on the first line and the percentage directly below it.
Tip: Stacked labels work best on charts with larger segments where there's enough space for two lines. On charts with many small segments, side-by-side formats with a short separator tend to be more readable.
Quick reference
| Goal | Format to enter |
|---|---|
| Show value only | {value} |
| Show percentage only | {percentage} |
| Show both, value first | {value}, {percentage} |
| Show both, percentage first | {percentage}, {value} |
| Stack value above percentage |
{value} + Enter + {percentage}
|
| Custom separator | Replace , with any character or text |
Next steps
- Custom Chart Legends - colours, axis labels, and legend settings
- How percentages are calculated in charts — understand what "percentage of the whole" means in different chart configurations
Comments
0 comments
Please sign in to leave a comment.