How to customize the chart block in Squarespace

Jan 4

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

The chart content block in Squarespace is a super easy way to get a quick visual of data built right into your site.

The designs might seem limited, but with a little CSS you can make that chart look even more awesome!

We can’t use code to change the color of the chart elements, but we can do fun things like add borders, and background colors.

These are the code names (selectors) for each chart type:

Bar Chart:

.chart-type-1009

Pie Chart:

.chart-type-1011

Line Chart:

.chart-type-1010

Chart Caption:

.chart-block-caption

Chart Legend Container:

.chart-block-legend

Chart Legend:

.legend-content

Here are some pre-made codes for your charts using the selectors above. Be sure to adjust any colors and values to suit your Squarespace sites unique style!

This one will give the chart a border:

.chart-block-container {border: 5px solid red}

This one gives the chart a background color:

.chart-block-container {background: mistyrose}

You can use this code to create a gradient background for your charts:

.chart-block-container {background: linear-gradient(#e5f5f6, #50bdb8)}

This code adds a border and background to the caption:

.chart-block-container .chart-block-caption figcaption{border: 5px solid teal; background: aliceblue}

And this last code is the premade code style from the end of the video:

.chart-block-container {border: 2px solid #333; border-radius: 25px}
.chart-block-container {background: linear-gradient(#fff, #e5f5f6)}
.chart-block-container .chart-block-caption figcaption{box-shadow: inset 0px 5px 5px #999; border-radius: 0px 0px 25px 25px; border-top: 2px solid #333; text-align:center}