A Beginner’s Guide to Squarespace Chart Blocks
A Squarespace chart block is an easy way to visualize data points directly on your Squarespace site.
Squarespace chart blocks display your data in a bar, line, or pie chart. Chart blocks will making your data easier to understand by converting your stats into a visual format. They're perfect for comparing numbers, showing trends, or highlighting important stats.
Chart blocks automatically adjust to look great on any screen size, and you can update your data whenever you want.
Quick tip: Get your data ready in a spreadsheet first! Make sure your columns and rows have labels for easy setup and then export that data to a CSV to easily upload it to Squarespace.
How to add a chart block to Squarespace
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the chart option form the list of content blocks.
Double click on the block to edit the content, or select the pencil icon.
Pick the type of chart you want: bar, line, or pie. You'll see a basic chart to start with.
Next, add your data! You can either upload a spreadsheet file or type in your numbers directly. See the additional information below to learn about uploading a large amount of data to a chart block.
On the design tab, you can give your chart a title, add a caption below for more details or notes, and you can choose show a legend to explain what your data means.
Select a predesign color palette to update the colors in your chart.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Bar Chart Example
Line Chart Example
Pie Chart Example
Adding data to your Squarespace chart block
You can easily copy and paste it directly from a plain text .csv file into your chart block. This is a super quick way to add lots of data, especially if you're already familiar with tools like Excel or Google Sheets. Follow these steps to upload your data to a Squarespace chart block:
Prep your spreadsheet: Give your data clear labels using column and row headers.
Save your file: Save your spreadsheet as a .csv file.
Open the .csv: Use a simple text editor like Notepad or TextEdit to view the .csv file.
Copy your data: Select all the text in the .csv file and copy it.
Head to your chart: Go back to your chart block editor and get ready to paste.
Clear the placeholder: Delete the example data in the chart block.
Paste your data: Paste the copied text from your .csv into the chart block.
Update your chart: Click "Update" and confirm to see your chart come to life!
What you can customize about the chart block using Squarespace
At this time, you are not able to customize the font style or colors of a chart block using the site style menu.
Under the design tab, you can select a premade color palette to change the colors used by your chart.
What you can customize about the calendar block design using CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace. This tutorial will teach you how to customize parts of a Squarespace chart block with custom CSS.
Where you can learn more about Squarespace calendar blocks
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog