Table and Chart widget settings

Table (in Basic) shows rows and columns: a price list, opening times, a spec sheet. Chart (in Business) turns a small table of numbers into a bar, line, pie or doughnut chart.

Spacing, Animations & Effects and the text style group (font, size, color, format, alignment, text shadow) are the same on every widget. See Widget design panel basics and Animations and effects.

How to add one

1. Open the editor and click Add.
2. Drag Table (under Basic) or Chart (under Business) onto the page.
3. Click Manage Table or Edit Chart Data in the toolbar to add your data.
4. Open Design for the look.

Table

Manage Table

Choose Type or upload or From a collection at the top.

• First row is the header (typing) / Show field names as header (collection): turns the header row on or off. On by default.
• Type or upload
  • Type straight into the cells. Each column has Delete column; the + at the end adds a column. Each row has Move up, Move down and Delete row; Add row is underneath.
  • Paste: copy cells from Google Sheets or Excel and paste into any cell. The cells fill from there, across and down.
  • Upload CSV: a .csv, .tsv or .txt file. It replaces what's in the table.
  • Clear All asks "Clear every cell?" (Clear or Keep).
  • Web and email addresses in cells become links on the live site.
• From a collection
  • Collection: pick one.
  • Fields to display (in this order): reorder with Move up / Move down, take a field out with Remove, and click a dashed + field to add it back.
  • If the collection has a dynamic page, each row's first cell links to that item's page.
  • Filter & sort: filters, Match this dynamic page, Sort by and Number of items, the same as in other collection widgets (see Collections and dynamic pages).
• Click Save.

Style

• Border: 0–8px. Border color shows once it's above 0.
• Cell padding: 0–40px, per screen size.
• Alternating row color: shades every other row. On by default. Even row color sets the shade.
• Even column width: makes every column the same width.
• Alignment: Left, Center or Right, per screen size.
• Text direction: Left to right or Right to left (for right-to-left languages).

Header

The text style group (size up to 40px) plus Background color. If the header is off, it says "The header row is off — turn it on in Manage Table."

Rows

The text style group plus Background color, for every other row.

First Column

• Style the first column separately: turn on to give the first column its own text style group and Background color, like row labels.

Mobile Display

How the table fits on phones:

• Squish: columns shrink to fit. Best for 2–3 columns.
• Scroll: visitors swipe sideways. Best for many columns. This is the default.
• Collapse: each row becomes a card with its column names. Best for few rows.

Spacing, Animations & Effects

Margin, plus Entrance and Scroll animations.

Chart

Edit Chart Data

The window is called Chart Data.

• Chart title (leave empty to hide).
• Edit table or Paste CSV / spreadsheet:
  • Edit table: a Label column (the bars, points or slices) and one column per series. Rename a series in its header, remove it with ×. Each label row has up / down arrows and × to remove it. Use + Add row and + Add series (up to 8 series).
  • Paste CSV / spreadsheet: the first row is a label column, then one column per series. Copying cells from Google Sheets or Excel works too. Click Use this data; it replaces the table.
  • Series colors (empty = automatic): a color per series.
  • Pie and doughnut charts show one series, and each row is a slice with its own Slice color.
• Click Save.

Automatic colors start with the site's primary color, then a fixed set of colors that are easy to tell apart, including for color-blind visitors.

Chart

• Chart type: Bar (default), Line, Pie or Doughnut.
• Legend: on by default.
• Gridlines (bar and line): on by default.
• Value labels (bar and line) or Percent labels (pie and doughnut): shows the number on each bar, point or slice. Off by default.
• Smooth lines (line only): curves the line. On by default.
• Value prefix (for example $) and Value suffix (for example %).

Axes

Bar and line only.

• Horizontal axis title and Vertical axis title.

Size & Background

• Chart height: 160–800px, per screen size. Default 400px on desktop, 350px on tablet, 300px on phones.
• Background: a color behind the chart. Off by default.
• Corners: 0–40px, shown when there's a background.

Title

The text style group (size up to 60px) for the chart title.

Spacing, Animations & Effects

Margin, plus Entrance and Scroll animations.

Examples

• Price list: a Table with a header row ("Service", "From"), Alternating row color on, First Column styled bold, and Mobile Display set to Squish.
• Locations from a collection: a Table From a collection showing Name, Town and Phone. Each name links to the location's page.
• Results over time: a Line Chart with months as labels, two series ("Calls", "Forms"), Smooth lines on and a Vertical axis title of "Leads".
• Where the money goes: a Doughnut Chart with Percent labels on and a brand color per slice.

Limits and what it can't do

• Tables hold up to 150 rows and 30 columns. Anything past that is left out ("Tables hold up to 150 rows and 30 columns — the rest was left out.").
• Table cells are plain text. You can't merge cells or put images in cells. Web and email addresses become links on the live site.
• Charts are bar, line, pie and doughnut only, with up to 8 series. Pie and doughnut use one series.
• Charts can't read from a collection or a live spreadsheet. Paste new data when the numbers change.
• Charts are drawn as a picture of the data with no script, so they load fast. The numbers are also in a hidden table for screen readers and search engines.
• Neither widget can use Connect to Data.

Who can use it

Anyone with the Mount Olympus tool on the agency team. Client people need Editor to add, move or style these widgets, or Widget content to change the table or chart data.

Troubleshooting

• "Need a header row (Label, Series name…) and at least one data row.": the pasted chart data needs a first row of names and at least one row of numbers.
• "That file has no rows.": the CSV is empty or isn't a text file. Export it again as CSV.
• Some of my pasted rows are missing: the paste went past 150 rows or 30 columns.
• The table is too wide on phones: set Mobile Display to Scroll or Collapse, or lower Cell padding on Mobile.
• Header styles don't change anything: the header row is off. Turn on First row is the header in Manage Table.
• My chart shows "No data": add at least one label and one series in Edit Chart Data.
• The pie chart only shows my first series: pie and doughnut charts show one series. Use a bar chart to compare series.