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

Chart blocks

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

Add a chart block

To add a chart block:

  1. Click Edit on a page or post.
  2. Click an insert point or the + icon. For more details on these first steps, visit Adding content with blocks.
  3. Click Bar Chart, Line Chart, or Pie Chart. The chart editor opens and a preview of the chart appears with placeholder content.

Chart Block options in the block menu.

  1. Use the Data or Import / Export tab to add data.
  2. Use the Design tab to design the chart.
  3. Click Apply to save 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, you'll see a preview of it on the page. You may need to reformat your data to best fit the new layout.

Bar charts are typically used to compare values and/or track changes over time. This bar chart block shows ticket sales by location over three months. Each bar color represents a different year.Example of a Bar Chart Block.

Line charts are typically used 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.

Example of a Line Chart Block.

Pie charts are typically used 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.

Example of a Pie Chart Block.

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:

Example of imported data format in the block editor.

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

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.

In Bar Chart Blocks, each row represents a subject on the X axis.

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.

With multiple columns, Bar Chart Blocks can make multiple comparisons between subjects.

Other tips

  • It isn’t possible to create a stacked bar chart at this time.
  • The title, caption, and legend can’t be moved around the block.
  • The numbers on the Y axis may round up automatically. It's not possible to edit this.
  • To resize bar chart blocks, visit Resizing blocks.
  • On your live site, tooltips appear on hover to show details of a data point.

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.

Line Chart Blocks use the X axis for intervals.

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.

With multiple columns, Line Chart Blocks can make multiple comparisons between subjects.

Other tips

  • It isn’t possible to add uncertainties or forecasts (gray or dotted lines that anticipate trends).
  • The title, caption, and legend can’t be moved around the block.
  • The numbers on the Y axis may round up automatically. It's not possible to edit this.
  • To resize line chart blocks, visit Resizing blocks.
  • On your live site, tooltips appear on hover to show details of a data point.

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 numeric value 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.

The Data tab of a Pie Chart Block.

Other tips

  • We don’t recommend flipping the X and Y axes.
  • The title, caption, and legend can’t be moved around the block.
  • The label for each item is designed for two or three words maximum. If you want longer names or more information for each item, use a text block below the chart to explain the labels in more detail.
  • Other text or characters added to numeric values in the second column, such as percentage symbols, won't appear on your live site.
  • To resize pie chart blocks, visit Resizing blocks.
  • On your live site, the details of each "slice" of the chart appear on hover only.

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:

Design option Use this to
Chart Title Add a title for the chart. We recommend keeping this short, like "2019 Ticket Sales."


Add a caption to display below the chart. This caption is useful for citing sources, dates, detailed explanations, and/or disclaimers.
Show Legend Show data labels in a legend.

Color Palette

Choose a color scheme for the chart from one of our many preset options to help you create a cohesive look. Each option has five colors. It isn't possible to customize specific colors for data points or chart axes at this time.

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.

In all charts:

  • Title font - Follows Headings
  • Title color - Follows Heading (Large)
  • Title size - Follows Heading 2
  • Legend font - Follows Paragraphs
  • Legend color - Follows Paragraph (Medium)
  • Legend size - Follows Paragraph 2
  • Caption font - Follows Paragraphs and is always italicized
  • Caption color - Follows Paragraph (Medium)
  • Caption size - Follows Paragraph 2

All chart text follows Heading and Text tweaks. Exact options vary by template.

Export chart data

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

  1. In the Home menu, click Pages.
  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.
Was this article helpful?
17 out of 58 found this helpful