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

Squarespace offers three Chart Blocks for creating data visualizations on your site. Charts are great for explaining relationships between different series of data in a compelling way.

For formatting tips and steps for each Chart Block, see the guides below.

You can add charts anywhere blocks are supported for creating custom layouts, such as Regular Pages and blog posts. You’ll start by selecting a block, pasting data from a .csv or entering data directly, and then you’ll style the chart.

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.

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 easily into headers in the block.

Step 1 - Add a Chart Block

Open a page or post editor. Click an Insert Point or the +, and select Bar Chart, Line Chart, or Pie Chart from the block menu.

For more detailed steps, visit Adding blocks.

The chart editor opens and a preview of the chart appears with placeholder content.

Step 2 - Add data

Next, you’ll add data to represent in the chart.

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 if you’re familiar with building spreadsheets in Excel or Google Sheets.

.CSV formatting 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 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. Select all and copy the text.
  5. In the Chart Block Editor, click the Import/Export tab.
  6. Delete the placeholder data in the Chart Data box.
  7. Paste the text you copied from the .csv.
  8. Click Update .
  9. Click Confirm in the message that appears.
  10. The chart preview will refresh with new data.

Data in the Import / Export tab should look like this depending on your data:

Option 2 - Enter or edit data manually

You can build the chart from scratch by entering rows one-by-one in the block editor. This is an 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.

In the block editor, click the Data tab.

Remove placeholder data

Remove placeholder rows or columns by dragging and dropping them into the trash can that appears.

Create columns

To create new columns, click the + near the top-right and then enter column headers. Pie charts can only have two columns.

Create rows

Click the + near the bottom-left and then enter row headers.

Fill in the data

Double-click a cell to enter new data or replace placeholder data. Fill in all cells until your data is complete. As you enter data, the chart preview will update.

Tip: Navigate between cells and rows with the Tab key on your keyboard, just 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.

Step 3 - Design your chart (add a title, legend, and color palette)

Click the Design tab to customize your chart.

  1. Chart Title - Add a title for the chart. We recommend keeping this short, like “2015 Ticket Sales.”
  2. Caption - Add a caption to display below the chart. This caption is useful for citing sources, dates, detailed explanations, and/or disclaimers.
  3. Show Legend - Check to show data labels in a legend.
  4. Color Palette - Select a color scheme for the chart. To help you create a cohesive look, you can select from one of our many preset options. Each palette option has five colors. It isn’t possible to customize specific colors for data points at this time.
Note: Change fonts and colors for chart text in the Style Editor using the heading and text style tweaks. These exact options vary by template.

Click Apply to publish your changes.

Step 4 - Edit the chart

You can edit existing Chart Blocks any time.

  1. In the Pages panel, click the page or blog post containing the block.
  2. Double-click the Chart Block to open the editor.
  3. From here, you can edit the data, change the design, and export.

Quick edits

Reorder columns and rows In the Data tab, drag and drop columns or rows.
Delete columns and rows In the Data tab, drag and drop them into the trash can icon that appears, just like you delete blocks.
Add columns or rows In the Data tab, click the + icon.
Add new data from a .csv Open the .csv in a plain text editor, copy the text, and the paste it into the Import / Export tab.
Change the color scheme In the Design tab, select a color scheme.
Edit the title or caption In the Design tab, enter text.
Resize the chart Follow the steps in Resizing blocks.

Step 5 - Export chart data

You may want to back up your data to a .csv file outside of Squarespace.

  1. In the Pages panel, click the page or blog post containing the block.
  2. Double-click the Chart Block to open the editor.
  3. Click the Import / Export tab.
  4. Copy the data in the Chart Data box.
  5. Paste the data into a plain text editor.
  6. Save the file as a .csv. This converts the file into a spreadsheet.
Was this article helpful?
2 out of 7 found this helpful
Chart Blocks overview