Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using Bar Chart Blocks

Bar Chart Blocks add bar charts or bar graphs to a page or post. Bar charts are typically used to compare values and/or track their changes over time. You can compare multiple results for the same subject.

In the example below, we’re tracking ticket sales by location over three months. Each bar color represents a different month.

Add and design a Bar Chart Block

Here are the basic steps to add a Bar Chart Block. We recommend preparing data in a .csv before you begin.

Tip: For detailed steps and screenshots, visit Chart Blocks overview.
  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Select Bar Chart from the menu.
  4. For more detailed steps, visit Adding blocks.
  5. Add data. You can either paste it from a .csv opened in a plain text editor in the Import / Export tab or enter it manually in the Data tab of the block editor.
  6. Design your chart in the Design tab (add a title, legend, and color palette).
  7. Click Apply.

Formatting tips

Follow these guidelines when preparing data for Bar Chart Blocks.

Each row represents a bar or subject on the X axis on the chart. This is typically reserved for the main subjects you’re comparing.

Each new column represents the measurement you’re comparing between the subjects. Each new column creates a new vertical section in the chart.

To make a simple comparison between subjects, add one column to create one bar for each. To make multiple comparisons between subjects, add multiple columns.

Other tips

  • On your live site, tooltips appear on hover to show details of a data point.
  • The title, caption, and legend can’t be moved around the block.
  • It isn’t possible to create a stacked bar chart at this time.

Here's how our completed Bar Chart appears in the chart editor:

Was this article helpful?
2 out of 9 found this helpful
Using Bar Chart Blocks