Create bar, line, or pie charts to showcase data for your visitors in a compelling format.

Use chart blocks to create data visualizations on your site. Charts are great for explaining relationships between different series of data in a compelling way. You can create and style bar charts, line charts, and pie charts.

Chart blocks are a good alternative to embedding static images of charts created in programs outside of Squarespace. The charts responsively resize to ensure they look great in multiple screen sizes, and you can update the data any time.

Tip: This guide explains how to add charts to your site. To add a table with columns and rows, you can add custom code. To learn more, visit this post in the Squarespace Forum.

Keep in mind, custom code modifications fall outside the scope of our support. This means we’re unable to help you set up or troubleshoot code-based solutions.

Before you begin

We recommend preparing data in a .csv in a spreadsheet program like Excel or Google Sheets. Ensure that columns and rows have headers so they translate into headers in the block.

Add a chart block

To add a chart block:

1. Edit a page or post, click Add Block or an insert point, then click Chart. For help, visit Adding content with blocks.
2. Open the block editor by clicking the pencil icon on the block.
3. Click Bar Chart, Line Chart, or Pie Chart. The chart editor opens and a preview of the chart appears with placeholder content.

4. Use the Data or Import / Export tab to add data.
5. Use the Design tab to design the chart. If your site is on version 7.0, click Apply to publish your changes.

For more detailed steps, follow the sections below.

Chart block layouts

Here are examples of each chart block layout. You can change the layout in the data tab of the chart block. As 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.

Add data

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.

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

Option 1 - Copy data from a .csv

If you have a spreadsheet of data, you can 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.

Tip: In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.

1. Keep the chart block editor open.
2. In your spreadsheet program, save your data as a .csv file.
3. Open the file in a plain text editor like Notepad or TextEdit.
4. Highlight all and copy the text.
5. In the block editor, click Import / Export.
6. Delete the placeholder data in the chart data field.
7. Paste the text you copied from the .csv.
8. Click Update, then click Confirm in the message that appears.
9. The chart preview will refresh with new data.

Data in the import / export tab should look something like this:

Option 2 - Enter or edit data manually

You can build the chart from scratch by entering rows one-by-one in the block editor. Use this option if you don’t have existing data or if the chart will be fairly simple. You can also follow these steps to edit any data after importing it.

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

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

5. 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.

Design the chart

In the design tab, you can add custom text, show a legend, and choose a color palette. To learn more about these design options, review this table:

Style the text

Use site styles to change the font and color of the block's text. How you style the text depends on which version of Squarespace your site is on.

Export chart data

To back up your data to a .csv file outside of Squarespace:

1. Open the Pages panel.
2. Click Edit on the page or post where the chart block appears.
3. Double-click the chart block.
4. Click Import / Export.
5. Copy the data in the chart data field.
6. Paste the data into a plain text editor.
7. Save the file as a .csv. This converts the file into a spreadsheet.