Chart
Turn a few rows of numbers into a chart in your site's colors and fonts.
Usage
Chart draws a chart from a small table of numbers. Each row of the table is a category (a month, a region, a product) and each column of numbers is a series (this year and last year, for example).
When you add the block, paste cells copied from a spreadsheet and choose Use Pasted Data, or choose Start with Sample Data and replace it with your own. The first column holds the labels and each further column one series; a first row of names becomes the series names.
To change the numbers later, select the block and choose Edit Data in the block toolbar. Type into any cell, or paste a block of cells from a spreadsheet into a cell and the table fills from there, adding rows and series as needed. Enter moves down a row and adds a new one at the end. Choose Show Chart to see the result.
Pick the kind of chart under Chart Type in the block sidebar, and each series' color under Colors.
Charts draw themselves in as visitors scroll to them: bars grow, lines sweep across, pie slices fill round, and a Big Number counts up. Turn Animate off for a chart that should simply be there.
When to use it
Use it for a handful of numbers that read better as a picture: sales by quarter, visitors by month, where a budget goes, how one year compares with the last.
- Bar compares amounts. Horizontal suits long category names or many categories.
- Line and Area show change over time. A line chart's value axis fits the data, so a small change looks big; turn on Start at Zero when the true size of the change matters.
- Pie and Donut show how a whole splits into parts. They use the first column of numbers only. A donut can carry a Center Label in its hole: the total, or what the chart counts.
- Big Number shows one figure, the first number in the table, with its row label under it.
The chart sizes to its column, so it works in a Column or a Page Blocks panel as well as across a full section.
Tips
- Numbers can be pasted as they look in a spreadsheet: $1,200, 45%, (150) for a negative, or 1.234,5 with a decimal comma. When every pasted number shares a symbol such as $ or %, it moves into Prefix or Suffix for you.
- Short Numbers writes 1,250,000 as 1.3M, which keeps the axis tidy for big figures.
- Turn on Show Values to print each number on its bar or point. On a phone, crowded values are hidden and the axis carries them.
- With two or more series, a legend names each color. A single series has no legend, so give the chart a Title that says what it shows.
- Keep pies to about six slices. Past that, combine the smallest into an "Other" row.
- On narrow screens, long category labels turn upright and then show every other one, so short labels (Jan, Feb, Q1) read best. An upright label longer than about 8rem is cut short with an ellipsis.
- Visitors can hover a bar, point or slice to see its exact value.
- Screen readers read the numbers from a table that comes with every chart. Turn on Show Data Table to offer that table to everyone under a Show data link.
- Charts follow Reverse Print: in a dark section the text and gridlines turn light. Pick series colors that stand out against the section's background.
Settings
Chart
The kind of chart. Pie and Donut use the first column of numbers only, and Big Number shows the first number in the table with its row label.
- Bar defaultCompares amounts, one bar per number.
- LineShows change over time, one line per series. A blank cell breaks the line.
- AreaA line chart with the area under each line shaded.
- PieSplits a whole into slices. Rows with zero or a negative number are left out.
- DonutA pie with a hole in the middle.
- Big NumberOne large figure instead of a chart.
Horizontal bars give long category names room and suit a long list of categories.
Grouped puts each series' bar side by side. Stacked piles them into one bar per category, with Show Values printing each bar's total. Shows with two or more series.
Shown above the chart and read out as the chart's name by screen readers.
The heading look for the title. It changes the look only, not the page outline. Shows once the chart has a title.
A line under the title, such as where the numbers come from. Screen readers read it as the chart's description.
On, the chart draws itself in as it comes into view: bars grow, lines and areas sweep across, pie slices fill round, and a Big Number counts up. Visitors who ask their device for less motion see the finished chart straight away.
Labels
A name for the categories (Month, Region), shown under the bars or beside horizontal ones. Also heads the first column of the data table.
A name for the numbers (Visitors, Revenue), shown along the number axis.
Line charts only. Off, the value axis fits the data, so a small change fills the chart. On, the axis starts at zero, which shows a change at its true size. Bar and area charts always start at zero.
Donut charts only. Text in the hole of the donut, such as the total or what the chart counts. Keep it short: it has to fit inside the ring.
The key that names each color. Bar, line and area charts only show it with two or more series.
Prints each number on its bar or point. Pie and donut charts add each slice's number and share to the legend.
Adds a Show data link under the chart that opens a table of the numbers. Screen readers get the table either way.
Number Format
Text before every number, such as $.
Text after every number, such as % or kg.
How many decimal places numbers show. As typed shows up to two, as each number needs. The number axis picks its own round steps.
Writes thousands, millions and billions as K, M and B: 1,250,000 shows as 1.3M.