Sparklines in Chart.js
A sparkline is a small, simple chart that can be used to show trend information at a glance. There are normally no axes or tooltips, just a small line of data points. While building Glean, I wanted a quick way to show the user how their accounts are performing over time. Sparklines were perfect for this use case.
While Chart.js doesn’t have a first class sparkline chart option, the configurability of line charts still makes this possible without including any other libraries or plugins.
The following code will produce a sparkline in Chart.js version 3.3.2
new Chart(chartContext, {
type: "line",
data: {
labels: series,
datasets: [
{
data: series,
fill: false,
pointRadius: 0,
spanGaps: true,
tension: 0.2
},
],
},
options: {
events: [],
borderColor: borderColor,
borderWidth: 1.5,
responsive: false,
plugins: {
legend: {
display: false,
labels: {
display: false
}
},
tooltips: {
display: false
}
},
scales: {
x: {
display: false,
},
y: {
display: false,
}
},
},
});