Chart blocks

Chart blocks

false

Chart blocks

Last updated August 14, 2026 23:14

Showcase data for your visitors in a compelling visual format.

With chart blocks, you can create and style bar charts, line charts, and pie charts on your site.

Tip: To add a table with columns and rows, visit this post in the Squarespace Forum. Keep in mind, our support team can’t help you add custom code to your site or troubleshoot issues that arise from using it.

Video on adding and formatting chart blocks

Watch this video to learn how to create a chart block and import your data.

Add a chart block

To add a chart block:

Open the Pages panel.
Click the page where you want to add the block, then click Edit.
Click Add block or + to open the block menu, then click Chart.
To open the block editor, click the block, then click the pencil icon on the block.
The chart block is a bar chart by default. Under Data, click the Chart Type dropdown menu to select a different layout.
Use the Data or Import / Export tab to add data.
Use the Design tab to customize the chart's design. If your site is on version 7.0, click Applyto publish your changes.

Choose a chart block layout

Change the chart's layout in the Data tab of the block. When you choose a layout, a preview of it appears on the page. You may need to reformat your data to best fit the new layout.

Bar
Line
Pie

Use bar charts to compare values or track changes over time. This bar chart block shows ticket sales by location over three months. Each bar color represents a different year.

Use line charts to display changes over time. With multiple lines, you can compare changes between multiple subjects. This line chart block shows enrollment over six months. Each line represents a different year.

Use pie charts to compare poll numbers, preferences, or percentages, with data represented as “slices” of the pie. This pie chart block shows favorite pies based on survey results.

Add data to your chart block

After choosing your chart type, you can use the Import / Export tab to import data from a .csv or the Data tab to add data manually. Numbers on the Y axis may round up automatically.

Note: You can add up to 25 rows and 25 columns. Enter numbers only. The editor converts all dollar signs ($) to 0s.

Copy data for your chart block from a .csv

If you have a spreadsheet of data, copy and paste it from a plain text .csv file. We recommend this method, especially if there’s a lot of data and you’re familiar with building spreadsheets in Excel or Google Sheets.

To import data from a spreadsheet:

In your spreadsheet program, save your data as a .csv file.
Open the file in a plain text editor like Notepad or TextEdit.
Highlight all and copy the text.
In the block editor, click Import / Export.
Delete the placeholder data in the chart data field.
Paste the text you copied from the .csv.
Click Update, then click Confirm in the message that appears.

Enter or edit chart block data manually

To build the chart from scratch, add rows of data one-by-one in the Data tab of the block editor. Use this option if you don’t have existing data or if you only need to show a few data points.

To add data manually:

In the Data tab of the block editor, replace the data in placeholder rows or remove them by dragging and dropping them into the trash can that appears.
Click the + icon near the top-right to add new columns and column headers. Pie chart blocks can only have two columns.
Click the + icon near the bottom-left to add new rows and row headers.
Click into a cell to enter new data or replace placeholder data. Fill in all cells.

Tip: Navigate between cells and rows with the Tab key, like in any spreadsheet program.

Check Flip X and Y Axes to change the way data is plotted. We don’t recommend this for pie chart blocks.

Formatting tips

How you format your data may depend on the type of chart block you use. To learn more about formatting each chart, follow these tips.

Bar
Line
Pie

Each row in bar chart blocks 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 and 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. It's not possible to create a stacked bar chart.

The X axis (created by rows) in line chart blocks is typically for intervals. Each row in your data creates a new interval in the chart.

The Y axis (created by columns) is typically for the value you’re tracking over time (for example, sales, revenue, or population). Each column in your data creates a new line in the chart.

If you’re comparing multiple lines, add multiple columns. It's not possible to add uncertainties or forecasts (gray or dotted lines that anticipate trends).

Pie chart blocks are designed to compare up to five items. Each color palette includes five colors before they start repeating.

Data should only contain two columns, where the first column contains a label, and a second column contains a number that represents that label. In the example below, the first column contains the list of pies, and the second column contains the number of people who like that pie.

Design limitations for pie charts

When creating pie charts:

We don't recommend flipping the X and Y axes.
The label for each item is designed for two or three words maximum. If you want longer names or more information for each item, add a text block below the chart to explain the labels in more detail.
Other text or characters added to the values in the second column, such as percentage symbols, won't appear on your live site.
On your live site, the details of each “slice” of the chart appear on hover only.

Customize the chart block design

In the Design tab, you can customize the chart block. It's not possible to customize the placement of titles, captions, and legends.

Use these options to customize your chart's design:

Chart Title - Add a title for the chart. We recommend keeping this short, like “2019 ticket sales.”
Caption - Add a caption to display below the chart. This caption is useful for citing sources, dates, detailed explanations, or disclaimers.
Show Legend - Show data labels in a legend.
Color Palette - Choose from one of five preset color schemes. It's not possible to customize specific colors for data points or axes.