Stacked Bar Chart — Chart.js

A stacked bar chart that displays multiple data series stacked on top of each other within each category, showing both individual component values and their cumulative totals. This visualization excels at revealing part-to-whole relationships while maintaining the ability to compare totals across categories. Stacked bar charts are particularly effective for composition analysis, where understanding how different components contribute to a whole is as important as comparing totals.

Stacked Bar Chart rendered with Chart.js

Renders

JavaScript source (Chart.js)

// anyplot.ai
// bar-stacked: Stacked Bar Chart
// Library: chartjs 4.4.7 | JavaScript 22.23.2
// Quality: 88/100 | Created: 2026-09-02

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Monthly energy consumption by source (GWh) — renewables rising, gas falling.
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
const solar = [18, 22, 30, 38, 45, 50];
const wind = [35, 32, 28, 25, 20, 18];
const hydro = [40, 38, 36, 34, 32, 30];
const naturalGas = [52, 48, 44, 38, 30, 22];
const totals = months.map(
  (_, i) => solar[i] + wind[i] + hydro[i] + naturalGas[i]
);

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

// --- Total-above-stack labels (own plugin, no external dependency) ----------
const totalLabelsPlugin = {
  id: "totalLabels",
  afterDatasetsDraw(chart) {
    const {
      ctx,
      data,
      scales: { x: xScale, y: yScale },
    } = chart;
    ctx.save();
    ctx.fillStyle = t.ink;
    ctx.font = "600 15px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";
    data.labels.forEach((_, i) => {
      const total = data.datasets.reduce((sum, ds) => sum + ds.data[i], 0);
      const xPixel = xScale.getPixelForValue(i);
      const yPixel = yScale.getPixelForValue(total);
      ctx.fillText(`${total} GWh`, xPixel, yPixel - 8);
    });
    ctx.restore();
  },
};

// --- Chart --------------------------------------------------------------------
new Chart(canvas, {
  type: "bar",
  data: {
    labels: months,
    datasets: [
      {
        label: "Solar",
        data: solar,
        backgroundColor: t.palette[0],
        stack: "energy",
        borderColor: t.pageBg,
        borderWidth: 1,
      },
      {
        label: "Wind",
        data: wind,
        backgroundColor: t.palette[1],
        stack: "energy",
        borderColor: t.pageBg,
        borderWidth: 1,
      },
      {
        label: "Hydro",
        data: hydro,
        backgroundColor: t.palette[2],
        stack: "energy",
        borderColor: t.pageBg,
        borderWidth: 1,
      },
      {
        label: "Natural Gas",
        data: naturalGas,
        backgroundColor: t.palette[3],
        stack: "energy",
        borderColor: t.pageBg,
        borderWidth: 1,
      },
    ],
  },
  plugins: [totalLabelsPlugin],
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: false,
    layout: { padding: { top: 30 } },
    plugins: {
      title: {
        display: true,
        text: "bar-stacked · javascript · chartjs · anyplot.ai",
        color: t.ink,
        font: { size: 27 },
      },
      legend: {
        position: "top",
        labels: { color: t.ink, font: { size: 16 } },
      },
    },
    scales: {
      x: {
        stacked: true,
        categoryPercentage: 0.8,
        barPercentage: 0.6,
        ticks: { color: t.inkSoft, font: { size: 14 } },
        grid: { display: false },
        title: {
          display: true,
          text: "Month",
          color: t.ink,
          font: { size: 16 },
        },
      },
      y: {
        stacked: true,
        beginAtZero: true,
        suggestedMax: Math.max(...totals) * 1.15,
        ticks: { color: t.inkSoft, font: { size: 14 } },
        grid: { color: t.grid },
        title: {
          display: true,
          text: "Energy Consumption (GWh)",
          color: t.ink,
          font: { size: 16 },
        },
      },
    },
  },
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/bar-stacked/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": "bar-stacked",
  "language": "javascript",
  "library": "chartjs",
  "page": "https://anyplot.ai/bar-stacked/javascript/chartjs",
  "hub": "https://anyplot.ai/bar-stacked",
  "code_json": "https://api.anyplot.ai/specs/bar-stacked/chartjs/code",
  "spec_json": "https://api.anyplot.ai/specs/bar-stacked",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/bar-stacked/javascript/chartjs/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/bar-stacked/javascript/chartjs/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/bar-stacked/javascript/chartjs/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/bar-stacked/javascript/chartjs/plot-dark.html",
  "quality_score": 88.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Stacked Bar Chart on anyplot.ai.

Stacked Bar Chart — Chart.js

Renders

JavaScript source (Chart.js)

Retrieve this implementation

Other implementations