Chart widget
The Chart widget lets you turn numerical data into visual charts directly on your page.
You can use it to show comparisons, trends, progress, totals, targets, and other data in several different formats.
Available chart types include:
- Bar
- Line
- Area
- Combo (bar + line)
- Donut
- Gauge
You can enter data manually, paste data from a spreadsheet, add multiple data series, customize colors, and control how values, grids, legends, tooltips, and animations are displayed.
This article first explains how to add and manage chart data, followed by the settings specific to each chart type.
Chart Data
The Chart Data settings contain the information used to build your chart.
For a simple chart, you can create a single set of data points.
For more advanced charts, you can add multiple series to compare several sets of values.
Data points
Each data point contains:
- A Label
- A Value
- An optional custom color
For example:
- Jan – 320
- Feb – 540
- Mar – 410
- Apr – 680
- May – 590
The label identifies the data point and the value determines its numerical position or size in the chart.
Add a data point
Click Add to create another data point.
Edit a data point
Click the settings icon next to a data point.
You can then edit:
Label
Enter the category, period, or name represented by the data point.
For example:
Jan
Value
Enter the numerical value.
For example:
320
Custom color
Enable Custom color when you want a specific data point to use its own color rather than the default chart or series color.
This can be useful when individual values need additional emphasis.
Reorder data points
Use the drag handle to change the order of the data points.
Order is especially important for Line and Area charts, where the sequence determines how the chart progresses.
Delete a data point
Click the trash icon to remove it.
💡 Tip
Use clear, short labels. Charts are easiest to understand when visitors can identify categories or time periods at a glance.
Series
A series represents an additional set of values within the same chart.
You can use multiple series when you want to compare data such as:
- Sales vs target
- This year vs last year
- Product A vs Product B
- New customers vs returning customers
For a chart containing only one set of values, you can leave the Series section empty.
Add a series
Click Add series to create another set of data.
Series Name
Enter a descriptive name for the series.
For example:
- Sales
- Target
- 2026
- Returning customers
The name can also be shown in the chart legend when Show legend is enabled.
Series Color
Choose the color used to represent the series.
When several series are included, different colors help visitors distinguish between them.
💡 Tip
Use series when the values are genuinely useful to compare. Adding too many series can make a chart difficult to read.
Paste data
Instead of entering every value manually, click Paste data to paste structured data from a spreadsheet or CSV file.
The first column is used for labels and additional columns are interpreted as series.
An optional first row can be used to name the series.
For example:
Month, Sales, Target
Jan, 320, 400
Feb, 540, 400
Mar, 610, 400
The widget accepts data separated by:
- Commas
- Tabs
- Spaces
This makes it easy to copy data directly from applications such as Excel or Google Sheets.
💡 Tip
For larger charts or charts with multiple series, pasting data is usually much faster than creating each point manually.
Chart Type
The Chart Type setting determines how the data is visualized.
Available options:
- Bar
- Line
- Area
- Combo (bar + line)
- Donut
- Gauge
The settings available underneath change depending on the selected chart type.
General styling
Several styling and behavior settings are shared across chart types.
Theme
Choose the overall visual theme of the chart.
Use the theme that works best with the surrounding section and page background.
Text Font Family
Controls the font used for chart labels and values.
For consistency, it is usually best to use the same font family as the rest of your website.
Text Color
Controls the color used for chart text.
Make sure the selected color provides sufficient contrast with the page background.
Value Prefix
Adds text or a symbol before displayed values.
For example:
$
can display:
$320
This is useful for currencies and other units normally written before the value.
Value Suffix
Adds text or a symbol after displayed values.
For example:
%
can display:
78%
Other examples could include:
- kr
- GB
- users
- hrs
Show values
Enable Show values to display the numerical values directly on the chart.
Disable it for a cleaner chart when the exact values are not necessary.
Compact numbers
Enable Compact numbers (1.2K) to shorten larger values.
For example:
1,200
can be displayed as:
1.2K
This can make charts with large numbers more compact and easier to scan.
Show grid
Enable Show grid to display reference lines behind the chart.
Grid lines can make it easier to compare values visually.
Grid Style
When the grid is enabled, use Grid Style to control its appearance.
Show legend
Enable Show legend when the chart contains multiple series and visitors need to identify which color represents each series.
For a simple single-series chart, a legend is often unnecessary.
Hover tooltips
Enable Hover tooltips to show additional value information when a visitor hovers over a chart element.
This lets you keep the visible chart relatively clean while still making exact values accessible.
Count up values
Enable Count up values to animate displayed numerical values from zero to their final value.
Animate on scroll
Enable Animate on scroll to animate the chart when it enters the visitor's view.
Animation Duration
Controls how long the chart animation takes.
The value is measured in milliseconds (ms).
- Lower value = faster animation
- Higher value = slower animation
💡 Tip
Animation can help draw attention to important data, but keep it relatively subtle. Charts should remain easy to understand even without animation.
Bar chart
A Bar chart represents values using individual bars.
It works particularly well for comparing categories, periods, products, or other distinct values.
For example:
- Monthly sales
- Number of customers by product
- Revenue by category
- Conversion rates by campaign
Bar Style
Controls the visual style of the bars.
For example, Rounded bars creates bars with rounded ends.
Orientation
Controls the direction of the bars.
For example, bars can be displayed vertically or horizontally depending on the selected option.
Border Radius
Controls how rounded the corners of the bars are.
- Lower value = sharper corners
- Higher value = more rounded corners
Target Value
Enter a target value when you want to visually compare the chart data against a specific goal.
For example:
500
Target Label
Enter the text used to identify the target.
For example:
- Goal
- Target
- Budget
- Benchmark
💡 Tip
Bar charts are usually the best choice when the main purpose is to compare the size of several separate values.
Line chart
A Line chart connects data points with a line.
It works particularly well for showing how a value develops over an ordered sequence, such as:
- Time
- Months
- Years
- Stages
- Progress
Line Style
Controls how the line is drawn.
For example, Smooth creates a curved transition between data points.
Target Value
Enter a target or benchmark value when you want to compare the line against a goal.
Target Label
Enter the label displayed for the target value.
💡 Tip
Use Line charts when the relationship and movement between consecutive data points matters more than comparing isolated categories.
Area chart
An Area chart works similarly to a Line chart but fills the area underneath the line.
This gives the overall magnitude and development of the data more visual emphasis.
Area charts work well for:
- Growth over time
- Traffic trends
- Revenue development
- Cumulative-looking visual trends
Line Style
Controls how the upper line of the area chart is drawn.
For example, Smooth creates a curved progression between values.
Target Value
Enter a target value if you want to show a benchmark together with the chart.
Target Label
Enter the text used to identify the target.
💡 Tip
Choose an Area chart when you want to emphasize both the trend and the visual volume of the values.
Combo chart
The Combo (bar + line) chart combines bars and a line within the same visualization.
This is useful when you want to compare two related types of information that benefit from different visual treatments.
For example:
- Actual sales as bars + target as a line
- Revenue as bars + conversion rate as a line
- Orders as bars + trend line
Line Style
Controls how the line portion of the chart is drawn.
For example, Smooth creates curved transitions between data points.
Border Radius
Controls how rounded the bar portion of the chart is.
Target Value
Enter an optional target or benchmark value.
Target Label
Enter the text used to identify the target.
💡 Tip
Combo charts are most useful when the bar and line communicate different but closely related information. Avoid combining unrelated metrics simply because both can fit into one chart.
Donut chart
A Donut chart displays values as sections of a circular ring.
It works best when showing how several categories contribute to a total.
For example:
- Revenue distribution
- Customer segments
- Traffic sources
- Product mix
Thickness
Controls the thickness of the donut ring.
- Lower value = thinner ring
- Higher value = thicker ring
Center Label
Enter the text displayed in the center of the donut.
For example:
Total
The center can display the combined total together with this label.
💡 Tip
Donut charts work best with a relatively small number of categories. Too many segments make the chart difficult to interpret.
Gauge chart
A Gauge chart displays one value against a defined maximum using a semicircular progress indicator.
It works particularly well for:
- Progress toward a goal
- Performance scores
- Completion percentages
- Capacity
- Ratings
- KPIs
Thickness
Controls the thickness of the gauge.
Center Label
Enter the text shown underneath or alongside the main gauge value.
For example:
Total
Gauge Value
Enter the current value represented by the gauge.
For example:
78
Max
Enter the maximum value of the gauge.
For example, if the gauge represents a percentage, you could use:
100
A Gauge Value of 78 and a Max of 100 would therefore represent 78% of the available range.
💡 Tip
Gauge charts are most effective when visitors need to understand progress toward a clearly defined maximum or goal, rather than compare several independent values.
Choosing the right chart type
Different charts communicate different kinds of information.
Bar
Best for comparing separate categories or values.
Line
Best for showing trends and changes across an ordered sequence.
Area
Best for showing a trend while giving the magnitude of the values more visual emphasis.
Combo (bar + line)
Best for comparing related data that benefits from both bars and a line.
Donut
Best for showing how categories contribute to a total.
Gauge
Best for displaying one value relative to a maximum or target.
💡 Tip
Choose the simplest chart that communicates the information clearly. A visually impressive chart is not useful if visitors have to spend extra time figuring out what it means.
Best practices
- Use clear and concise data labels
- Keep the number of categories and series manageable
- Choose the chart type based on the information you want visitors to understand
- Use consistent units within the same chart
- Add a prefix or suffix when the unit is not otherwise obvious
- Use legends only when they are needed
- Use custom colors selectively to emphasize important values
- Avoid excessive animation
- Use targets when they provide meaningful context
- Check charts on both desktop and mobile
- Paste data instead of entering it manually when working with larger datasets
💡 Tip
Before adding a chart, decide what one thing visitors should understand from it. Build the chart around that message rather than trying to visualize every available data point.
Summary
- The Chart widget visualizes numerical information directly on your page
- Enter data manually or use Paste data for spreadsheet and CSV data
- Add multiple series to compare several datasets
- Customize individual data-point and series colors
- Choose between Bar, Line, Area, Combo, Donut, and Gauge
- Add prefixes and suffixes to values
- Show or hide values, grid lines, legends, and hover tooltips
- Add target values to supported chart types
- Use count-up and scroll animations when appropriate
- Choose a chart type based on whether you are communicating comparisons, trends, proportions, or progress
Used well, the Chart widget makes numerical information easier to understand and gives visitors a quick visual overview of patterns, differences, and progress.