Basic Sparkline — Chart.js

A sparkline is a small, condensed line chart designed to be embedded inline with text or in dashboard cells. It shows trends at a glance without axes, labels, or detailed scales - pure data visualization in minimal space. The defining characteristic is extreme minimalism: a single continuous line that conveys the shape of data without any chart chrome.

Basic Sparkline rendered with Chart.js

Renders

JavaScript source (Chart.js)

// anyplot.ai
// sparkline-basic: Basic Sparkline
// Library: chartjs 4.4.7 | JavaScript 22.23.2
// Quality: 88/100 | Created: 2026-09-09
//# anyplot-orientation: landscape

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic LCG) ------------------------------------
function lcg(seed) {
  let state = seed;
  return () => {
    state = (state * 1103515245 + 12345) % 2147483648;
    return state / 2147483648;
  };
}
const rand = lcg(42);

const POINTS = 45;
const dailySessions = [];
let sessions = 8200;
for (let i = 0; i < POINTS; i++) {
  sessions += (rand() - 0.42) * 260;
  sessions = Math.max(sessions, 4000);
  dailySessions.push(Math.round(sessions));
}
const labels = dailySessions.map((_, i) => `Day ${i + 1}`);

const lastIndex = dailySessions.length - 1;
const dataMin = Math.min(...dailySessions);
const dataMax = Math.max(...dailySessions);
const minIndex = dailySessions.indexOf(dataMin);
const maxIndex = dailySessions.indexOf(dataMax);

const pointRadii = dailySessions.map((_, i) => {
  if (i === lastIndex) return 10;
  if (i === minIndex || i === maxIndex) return 7;
  return 0;
});
const pointColors = dailySessions.map((_, i) => {
  if (i === lastIndex) return t.palette[0];
  if (i === minIndex || i === maxIndex) return t.amber;
  return t.palette[0];
});

const dataRange = dataMax - dataMin;
const yPad = dataRange * 0.18;

// --- Mount -------------------------------------------------------------------
const canvas = document.createElement("canvas");
document.getElementById("container").appendChild(canvas);

// --- Chart -------------------------------------------------------------------
new Chart(canvas, {
  type: "line",
  data: {
    labels,
    datasets: [
      {
        data: dailySessions,
        borderColor: t.palette[0],
        borderWidth: 3.5,
        fill: false,
        tension: 0.15,
        pointRadius: pointRadii,
        pointHoverRadius: pointRadii,
        pointBackgroundColor: pointColors,
        pointBorderColor: t.pageBg,
        pointBorderWidth: 2,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: false,
    layout: { padding: { top: 10, right: 70, bottom: 20, left: 30 } },
    plugins: {
      title: {
        display: true,
        text: "sparkline-basic · javascript · chartjs · anyplot.ai",
        color: t.ink,
        font: { size: 22 },
        padding: { bottom: 30 },
      },
      legend: { display: false },
      tooltip: { enabled: false },
    },
    scales: {
      x: { display: false },
      y: { display: false, suggestedMin: dataMin - yPad, suggestedMax: dataMax + yPad },
    },
  },
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/sparkline-basic/chartjs/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "sparkline-basic",
  "language": "javascript",
  "library": "chartjs",
  "page": "https://anyplot.ai/sparkline-basic/javascript/chartjs",
  "hub": "https://anyplot.ai/sparkline-basic",
  "code_json": "https://api.anyplot.ai/specs/sparkline-basic/chartjs/code",
  "spec_json": "https://api.anyplot.ai/specs/sparkline-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/sparkline-basic/javascript/chartjs/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/sparkline-basic/javascript/chartjs/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/sparkline-basic/javascript/chartjs/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/sparkline-basic/javascript/chartjs/plot-dark.html",
  "quality_score": 88.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Sparkline on anyplot.ai.

Other implementations