{"spec_id":"area-stacked","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// area-stacked: Stacked Area Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-08-17\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// US energy consumption by sector, 2015-2024 (quadrillion BTU, illustrative)\nconst years = Array.from({ length: 10 }, (_, i) => 2015 + i);\nconst dipYearIndex = years.indexOf(2020);\n\nconst industrial = [31.8, 32.1, 32.6, 33.4, 33.0, 30.9, 32.5, 33.7, 34.1, 34.5];\nconst transportation = [27.1, 27.5, 27.9, 28.3, 28.2, 24.6, 26.4, 27.1, 27.4, 27.6];\nconst residential = [21.4, 20.6, 20.9, 21.6, 21.2, 20.8, 21.9, 21.5, 21.3, 21.6];\nconst commercial = [18.3, 18.1, 18.0, 18.4, 18.1, 16.9, 17.6, 18.0, 18.2, 18.4];\nconst agriculture = [2.4, 2.5, 2.5, 2.6, 2.6, 2.5, 2.6, 2.7, 2.7, 2.8];\n\n// Last point of the thinnest band (Agriculture) carries a direct callout label\n// so the smallest series stays legible even though its ~2.7/~100 share is\n// visually near-invisible against the four larger bands beneath it.\nconst agricultureData = agriculture.map((v, i) =>\n  i === agriculture.length - 1\n    ? {\n        y: v,\n        dataLabels: {\n          enabled: true,\n          format: \"Agriculture\",\n          align: \"left\",\n          x: 10,\n          y: -6,\n          style: { color: t.inkSoft, fontSize: \"12px\", fontWeight: \"normal\", textOutline: \"none\" },\n        },\n      }\n    : v,\n);\n\n// --- Chart -------------------------------------------------------------------\nconst title = \"area-stacked · javascript · highcharts · anyplot.ai\";\n\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"area\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: title,\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: years.map(String),\n    maxPadding: 0.07,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: \"Year\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    // Shaded column (not a hard line) so it sits behind the opaque stack fill\n    // and never cuts across the per-year stack-total labels above the peak.\n    plotBands: [\n      {\n        from: dipYearIndex - 0.5,\n        to: dipYearIndex + 0.5,\n        color: t.grid,\n        label: {\n          text: \"pandemic-era dip\",\n          verticalAlign: \"top\",\n          align: \"center\",\n          y: 12,\n          style: { color: t.inkSoft, fontSize: \"12px\" },\n        },\n      },\n    ],\n  },\n  yAxis: {\n    min: 0,\n    title: {\n      text: \"Energy Consumption (quadrillion BTU)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    stackLabels: {\n      enabled: true,\n      style: { color: t.inkSoft, fontSize: \"12px\", fontWeight: \"normal\", textOutline: \"none\" },\n      formatter: function () {\n        return Math.round(this.total);\n      },\n    },\n  },\n  legend: {\n    reversed: true,\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: { enabled: false },\n  plotOptions: {\n    series: { animation: false, marker: { enabled: false } },\n    area: {\n      stacking: \"normal\",\n      lineWidth: 2,\n      fillOpacity: 0.8,\n      lineColor: undefined,\n    },\n  },\n  series: [\n    // Highcharts stacks the last-defined series at the base of the stack, so\n    // the array runs smallest-to-largest (Agriculture first) to put the\n    // largest series (Industrial) at the bottom per the spec's guidance.\n    { name: \"Agriculture\", data: agricultureData, color: t.palette[4] },\n    { name: \"Commercial\", data: commercial, color: t.palette[3] },\n    { name: \"Residential\", data: residential, color: t.palette[2] },\n    { name: \"Transportation\", data: transportation, color: t.palette[1] },\n    { name: \"Industrial\", data: industrial, color: t.palette[0] },\n  ],\n});\n"}