{"spec_id":"bar-stacked","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-stacked: Stacked Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 84/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// National electricity generation mix by source, 2019-2024 (TWh)\nconst years = [\"2019\", \"2020\", \"2021\", \"2022\", \"2023\", \"2024\"];\nconst sources = [\n  { name: \"Solar\", data: [18, 24, 33, 46, 62, 81] },\n  { name: \"Wind\", data: [61, 68, 74, 79, 86, 93] },\n  { name: \"Hydro\", data: [92, 90, 88, 91, 89, 87] },\n  { name: \"Natural Gas\", data: [145, 138, 130, 118, 104, 92] },\n  { name: \"Coal\", data: [96, 78, 62, 47, 33, 21] },\n];\n\nconst series = sources.map((s, i) => ({\n  name: s.name,\n  data: s.data,\n  color: t.palette[i],\n}));\n\n// --- Chart -------------------------------------------------------------------\nconst title = \"bar-stacked · javascript · highcharts · anyplot.ai\";\n\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\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  subtitle: {\n    text: \"Electricity generation mix by source (TWh)\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories: years,\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  },\n  yAxis: {\n    min: 0,\n    title: {\n      text: \"Generation (TWh)\",\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: {\n        color: t.inkSoft,\n        fontSize: \"14px\",\n        fontWeight: \"normal\",\n        textOutline: \"none\",\n      },\n    },\n  },\n  legend: {\n    align: \"center\",\n    verticalAlign: \"bottom\",\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      stacking: \"normal\",\n      borderWidth: 0,\n      borderRadius: 2,\n    },\n  },\n  series,\n});\n"}