Ethan
Gunderson

Sparklines in Chart.js

Sep 1, 2021 :: chartjs TIL

A sparkline in Glean

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,
        }
      },
    },
  });