Chart.js for Webflow
1
This cloneable uses version 4.2.1 of chart.js. This is the current version when this is posted {April 2023} ⏱️
2
Feel free to use these code scripts as you like and don't be afraid to look at the docs for more advanced features. For more advanced support, check out the slack channel
3
Watch the video below to learn how to implement in your own project
#1 Horizontal bar chart
Reveal chart code
<script>
//sets default color as white
Chart.defaults.color = "#fff";
//#1 Horizontal bar chart
const chart1 = document.getElementById("bar-chart-horizontal-1");
new Chart(chart1, {
type: "bar",
data: {
labels: [
"Narnia",
"South Pole",
"Tatooine",
"Pandora",
"Westeros",
"Middle-Earth",
"Asgard"
],
datasets: [
{
label: "Webflow Developers",
data: [398, 248, 106, 71, 50, 32, 12],
backgroundColor: "#188FFF",
borderWidth: 1,
borderColor: "rgba(255, 61, 131, 0)",
borderRadius: 4, //corresponds to border radius in pixels
hoverBackgroundColor: "#188FFF"
}
]
},
options: {
indexAxis: "y", //makes it horizontal bar
plugins: {
legend: { display: true },
title: {
display: true,
text: "Webflow Developer Locations"
}
},
scales: {
y: {
grid: {
display: true,
color: "#fff"
}
},
x: {
grid: {
display: true,
color: "#fff"
}
}
}
}
});
</script> #2 Horizontal bar chart
Reveal chart code
<script>
//get ID of chart and assign to variable to use later
const chart2 = document.getElementById("bar-chart-horizontal-2");
const chartBorderRadious = 12;
//sets gradient, can learn more here https://www.w3schools.com/tags/canvas_createlineargradient.asp
const ctx = chart2.getContext("2d");
const backgroundGradient = ctx.createLinearGradient(0, 0, 270, 0);
backgroundGradient.addColorStop(0, "rgba(0, 0, 0, 0)");
backgroundGradient.addColorStop(0.2, "rgba(44, 99, 99, 50)");
backgroundGradient.addColorStop(1, "#188FFF");
//#2 Horizontal bar chart
new Chart(chart2, {
type: "bar",
data: {
labels: [
"Narnia",
"South Pole",
"Tatooine",
"Pandora",
"Westeros",
"Middle-Earth",
"Asgard"
],
datasets: [
{
label: "Webflow Developers",
data: [398, 248, 106, 71, 50, 32, 12],
backgroundColor: backgroundGradient,
borderWidth: 1,
borderColor: "rgba(255, 61, 131, 0)",
borderRadius: chartBorderRadious,
// barThickness: 16,
barPercentage: 0.4,
hoverBackgroundColor: "#188FFF"
}
]
},
options: {
indexAxis: "y", //makes it horizontal bar
plugins: {
legend: { display: false },
title: {
display: false
}
},
scales: {
y: {
grid: {
display: false //no horizontal grid lines
}
},
x: {
grid: {
//sets color and makes stroke lines dashed
color: "#2A3E56"
},
border: {
dash: [4, 4] //sets dotted lines on grid
}
}
}
}
});
</script> #3 Vertical bar chart
Reveal chart code
<script>
//#3 Vertical bar chart
const chart3 = document.getElementById("bar-chart-vertical");
new Chart(chart3, {
type: "bar",
data: {
labels: [
"Narnia",
"South Pole",
"Tatooine",
"Pandora",
"Westeros",
"Middle-Earth",
"Asgard"
],
datasets: [
{
label: "Webflow Developers",
data: [398, 248, 106, 71, 50, 32, 12],
backgroundColor: "#188FFF",
borderWidth: 1,
borderRadius: 4 //corresponds to border radius in pixels
}
]
},
options: {
indexAxis: "x", //makes it vertical bar
plugins: {
legend: { display: true },
title: {
display: true,
text: "Webflow Developer Locations"
}
},
scales: {
y: {
grid: {
display: true,
color: "#fff"
}
},
x: {
grid: {
display: true,
color: "#fff"
}
}
}
}
});
</script> #4 Donut chart
Reveal chart code
<script>
//#4 Donut chart
const chart4 = document.getElementById("donut-chart");
new Chart(chart4, {
type: "doughnut",
data: {
labels: [
"Narnia",
"South Pole",
"Tatooine",
"Pandora",
"Westeros",
"Middle-Earth",
"Asgard"
],
datasets: [
{
label: "Webflow Developers",
data: [398, 248, 106, 71, 50, 32, 12],
backgroundColor: [
"#188FFF",
"#BADDFF",
"#74BCFF",
"#0E5699",
"#A3D2FF",
"#1681E6",
"#E8F4FF"
],
borderWidth: 1,
borderColor: "#fff",
hoverBackgroundColor: "#188FFF"
}
]
},
options: {
plugins: {
legend: { display: true },
title: {
display: true,
text: "Webflow Developer Locations"
}
}
}
});
</script> #5 Line chart
Reveal chart code
<script>
//#5 Horizontal bar chart
const chart5 = document.getElementById("line-chart");
new Chart(chart5, {
type: "line",
data: {
labels: [
"Narnia",
"South Pole",
"Tatooine",
"Pandora",
"Westeros",
"Middle-Earth",
"Asgard"
],
datasets: [
{
label: "Webflow Developers",
data: [398, 248, 106, 71, 50, 32, 12],
backgroundColor: "#188FFF",
borderWidth: 2,
borderColor: "#188FFF",
borderRadius: 4, //corresponds to border radius in pixels
hoverBackgroundColor: "#188FFF",
tension: 0.1 //0-1 on how tight the lines between the coordinates are. The more tension, the more fluid
}
]
},
options: {
indexAxis: "y", //makes it horizontal bar
plugins: {
legend: { display: true },
title: {
display: true,
text: "Webflow Developer Locations"
}
},
scales: {
y: {
grid: {
display: true,
color: "#fff"
}
},
x: {
grid: {
display: true,
color: "#fff"
}
}
}
}
});
</script> #6 Polar area chart
Reveal chart code
<script>
//#6 Polar area chart
const chart6 = document.getElementById("polar-area-chart");
new Chart(chart6, {
type: "polarArea",
data: {
labels: [
"Narnia",
"South Pole",
"Tatooine",
"Pandora",
"Westeros",
"Middle-Earth",
"Asgard"
],
datasets: [
{
label: "Webflow Developers",
data: [398, 248, 106, 71, 50, 32, 12],
backgroundColor: [
"#188FFF",
"#BADDFF",
"#74BCFF",
"#0E5699",
"#A3D2FF",
"#1681E6",
"#E8F4FF"
],
borderWidth: 1,
borderColor: "#fff",
hoverBackgroundColor: "#188FFF"
}
]
},
options: {
plugins: {
legend: { display: true },
title: {
display: true,
text: "Webflow Developer Locations"
}
},
scales: {
r: {
//r stands for the radial axises since this is a radial chart
grid: {
color: "#fff" //sets the radial lines to white
}
}
}
}
});
</script>