Data Visualization module

Chart block

Bar, horizontal bar, line, area, pie, doughnut or radar charts — from numbers you type or a CSV / Google Sheets link. Lightweight SVG, readable by screen readers, no chart library.

Overview

The Chart block turns numbers into a clean chart in seven types. Type or paste your data into a spreadsheet-like editor, or connect a CSV file or Google Sheet so the chart updates when the sheet changes. Charts are drawn on the server as crisp SVG — fast, sharp on any screen, with no heavy chart library — and come with a hidden data table for screen readers.

At a glance

Block name: wpbb/chart
Module: Data Visualization
Find it by searching: Chart
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Reports, results and statistics in articles.
Sales or growth figures on landing pages.
Live dashboards fed from a Google Sheet.

Example scenarios

Annual report: Bar chart, two series (2025, 2026), six months, title and a caption with the source.
Budget: Doughnut with the total in the middle, prefix “$”.
Team dashboard: Line chart from a Google Sheet, checked for new data every hour.

See it in action

These are live examples: real Chart blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Chart types — Bar, line, doughnut and radar charts. Point at a bar or slice for its value.

Open in a new tab

How to add the Chart block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Chart in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Chart in the results. The block appears with a sample bar chart (Jan–Jun, series 2025 and 2026).
Configure the content. Click Edit data (on the block or in the Chart panel) to change labels, series and values, or paste a table from Excel, Google Sheets or Numbers. Choose the chart type and options in the Settings tab.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Edit data

What it does: Opens the Chart data editor: a table with one row per label and one column per series.
What to enter or choose: Row labels (e.g. months), series names, colours and numbers. Buttons add or remove rows and series (“Remove row”, “Remove series”). Each series can use its own colour or the palette colour (“Use palette colour”).
Default: 2 sample items
How to use it: Click Edit data, then type in the cells, or paste into Copied cells.
When to use it: Always for typed-in data; with a link, this is the fallback data.
Example: Rows Jan–Jun; series “2025” and “2026”.
Result: The chart updates live. The Chart panel shows the size, e.g. “6 rows × 2 series”.
Good to know: Copied cells: copy a table from Excel, Google Sheets or Numbers — first row: series names, first column: labels — or type comma-separated values. This replaces the data above. Up to 60 rows and 8 series.

Settings panel: Chart

Type

What it does: The kind of chart.
What to enter or choose: One of: Bar, Horizontal bar, Line, Area, Pie, Doughnut, Radar.
Default: Bar
How to use it: Open the dropdown and pick an option.
When to use it: Bar to compare categories; Horizontal bar for long labels; Line/Area for trends over time; Pie/Doughnut for parts of a whole (one series); Radar to compare several qualities.
Example: Line for monthly visitors.
Result: The chart redraws. Pie and doughnut use the first series.

Data

What it does: Where the numbers come from.
What to enter or choose: One of: Typed into the block, From a link (CSV or Google Sheets).
Default: Typed into the block
How to use it: Click one of the buttons in the group.
When to use it: A link when the data changes often or is maintained by someone else.
Example: From a link.
Result: With a link, the typed data is kept as a fallback: “Saved data, shown if the link cannot be read”.

LinkShown when Data is From a link

What it does: The data file.
What to enter or choose: A CSV file address, or a Google Sheet shared with “Anyone with the link” (or published to the web).
Default: Empty
How to use it: Paste a full address, including https://.
When to use it: With the link option.
Example: https://docs.google.com/spreadsheets/d/…/edit.
Result: First row: series names; first column: labels. Normal Google Sheets links are converted to their CSV export automatically.
Good to know: Your server fetches the file (so your visitors do not contact Google). See External services.

Check for new dataShown when Data is From a link

What it does: How long a fetched copy is reused.
What to enter or choose: One of: Every 5 minutes, Every 15 minutes, Every hour, Every 6 hours, Once a day.
Default: Every hour
How to use it: Open the dropdown and pick an option.
When to use it: Shorter for live figures, longer for stable data.
Example: Every hour.
Result: The chart shows new data after this time.

Title

What it does: A heading above the chart (also the name of the data table for screen readers).
What to enter or choose: A short title.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Recommended.
Example: “Monthly revenue (k$)”.
Result: Shown above the chart.

Caption (e.g. the source)

What it does: A note below the chart.
What to enter or choose: Text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: To cite sources.
Example: “Source: internal sales data, 2026.”
Result: Shown as the figure caption.

Settings panel: Display

Height (px)

What it does: The height of the plot area for bar, line and area charts (pie, doughnut and radar keep their own proportions).
What to enter or choose: A number from 160 to 800 (px), in steps of 10.
Default: 320 px
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always optional.
Example: 400.
Result: Taller or shorter chart. On phones (below 600px) the plot uses 72% of this height, at least 180px.

Stack the seriesShown when a bar type with 2+ series

What it does: Stacks series on top of each other.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: When parts add up to a total.
Example: On to show totals.
Result: Bars stack instead of standing side by side.

Smooth curvesShown when Line or Area

What it does: Rounds the lines.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Always optional.
Example: On.
Result: Curves instead of straight segments.

PointsShown when Line, Area or Radar

What it does: Marks each data point.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Few data points.
Example: On.
Result: Dots on the lines.

Start the axis at zeroShown when Line or Area

What it does: Forces the value axis to include 0.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on for honest comparisons.
Example: Off to zoom in on small changes.
Result: The scale changes.

Value labelsShown when not Pie, Doughnut or Radar

What it does: Prints the number on each bar or point.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Small data sets.
Example: On for few bars.
Result: Numbers appear on the chart.

Grid linesShown when not Pie or Doughnut

What it does: Background guide lines.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually.
Example: On.
Result: Lines at each scale step.

Legend

What it does: Series names with their colours.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: More than one series (or pie slices).
Example: On with several series.
Result: A legend below the chart.

In the middleShown when Doughnut

What it does: What appears in the doughnut’s hole.
What to enter or choose: One of: Total, Custom text, Nothing.
Default: Total
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: Total.
Result: The sum of values, your text, or nothing.

TextShown when In the middle is Custom text

What it does: The custom centre text.
What to enter or choose: Short text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: With Custom text.
Example: “2026”.
Result: Shown in the hole.

Before values

What it does: Text before every value (axis, labels, tooltips).
What to enter or choose: A symbol or short text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Currencies.
Example: “$”.
Result: “$12”.

After values

What it does: Text after every value.
What to enter or choose: A symbol or short text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Units.
Example: “%” or “k”.
Result: “12%”.

Animate when scrolled into view

What it does: Draws the chart with a short entrance animation when it scrolls into view.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on; off for dashboards that refresh often.
Example: On.
Result: Skipped for visitors who prefer reduced motion.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Chart offers.

Element: Title selected first

The chart title.

Styles-tab controls for “Title”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Block

The chart box (background, padding, border…).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Axis labels

Axis labels and numbers.

Styles-tab controls for “Axis labels”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Legend

The legend.

Styles-tab controls for “Legend”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Caption

The caption.

Styles-tab controls for “Caption”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

Charts scale to the width of their container. On phones (below 600px) bar, line and area charts automatically use 72% of the Height setting (never less than 180px). Use Styles → Device: Mobile to reduce padding or font sizes on phones, and prefer Horizontal bar for long labels on narrow screens.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

The chart is complete SVG in the page HTML — it shows even without JavaScript. A small script adds hover tooltips and the entrance animation. Colours follow the Donix palette unless you pick a series colour.

Accessibility

Each chart is a labelled figure with a visually hidden data table, so screen-reader users get all the numbers.
Every bar, slice and point has a text tooltip (<title>).
Choose series colours with enough contrast from each other and from the background.

Tips and best practices

Round numbers before charting — fewer decimals read better.
Keep pie/doughnut charts to 6 slices or fewer.

Limitations and notes

Up to 60 labels and 8 series.
Radar charts keep space around the web for their labels (about 10 characters on each side), so in narrow columns (around 300px) the web itself becomes small. Give radar charts a wide column or a full row.
Remote files larger than 256 KB are not read.
Google Sheets must be shared with “Anyone with the link” or published to the web.

Troubleshooting

My Google Sheet data does not appear.

Check the sharing setting (Anyone with the link, or File → Share → Publish to web). The first row must contain the series names and the first column the labels. The chart keeps showing the saved data until the link can be read, and re-checks after the “Check for new data” time.