How to customize chart blocks in Squarespace

content block

Sep 26

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. This video will show you some of the creative ways to use the codes below!

Fun fact: this video is pretty outdated, but the codes still work! For the most up to date info on how to add these codes to squarespace, scroll to the bottom of the article.

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, and if you are brand new to code, check out the additional info below.

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

/* chart block background color: you can use a hex color code, too */
.chart-block-container {
background: blue 
}

/* add a gradient background */
.chart-block-container {
ackground: linear-gradient(#e5f5f6, #50bdb8)
}

/* add a border and background to the chart legend */
.chart-block-container .chart-block-caption figcaption{
border: 5px solid teal;
background: #e5f5f6
}

/* This code is the premade code style from 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
}