{"spec_id":"area-stacked","library":"echarts","language":"javascript","code":"// anyplot.ai\n// area-stacked: Stacked Area Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-08-17\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Electricity consumption by sector for a large multi-state utility holding\n// company's service territory, 2010-2024 (TWh, illustrative) — a ~185 TWh\n// footprint by 2024, in line with real multi-state utility holding companies\n// rather than a small national grid.\n// 2020 pulls commercial and industrial demand down (offices/plants idled)\n// while residential ticks up (work-from-home) and the EV-charging\n// transportation load keeps accelerating regardless of the downturn — a more\n// directionally varied pattern than a uniform up-trend across all sectors.\nconst years = Array.from({ length: 15 }, (_, i) => String(2010 + i));\n\nconst residential = [58, 57, 59, 57, 60, 61, 58, 60, 61, 61, 66, 63, 61, 63, 64];\nconst commercial = [51, 52, 53, 53, 54, 55, 56, 57, 58, 59, 48, 54, 58, 60, 62];\nconst industrial = [40, 40, 41, 40, 42, 41, 42, 41, 43, 42, 35, 40, 42, 43, 44];\nconst transportation = [0.5, 0.6, 0.8, 1.0, 1.3, 1.7, 2.2, 2.9, 3.8, 5.0, 6.2, 8.0, 10.2, 12.5, 15.0];\n\n// Order largest-to-smallest so the stack reads largest-at-bottom.\nconst series = [\n  { name: \"Residential\", data: residential },\n  { name: \"Commercial\", data: commercial },\n  { name: \"Industrial\", data: industrial },\n  { name: \"Transportation\", data: transportation },\n];\n\n// --- Init ---------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"area-stacked · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 28, fontWeight: 500 },\n  },\n  tooltip: { trigger: \"axis\" },\n  legend: {\n    bottom: 10,\n    textStyle: { color: t.inkSoft, fontSize: 14 },\n    itemWidth: 18,\n    itemHeight: 12,\n  },\n  grid: { left: 90, right: 60, top: 110, bottom: 90 },\n  xAxis: {\n    type: \"category\",\n    data: years,\n    boundaryGap: false,\n    name: \"Year\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    min: 0,\n    name: \"Electricity Consumption (TWh)\",\n    nameLocation: \"middle\",\n    nameGap: 60,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: series.map((s, i) => {\n    const isTransportation = s.name === \"Transportation\";\n    return {\n      name: s.name,\n      type: \"line\",\n      stack: \"total\",\n      smooth: 0.2,\n      showSymbol: false,\n      // Transportation carries the story of this dataset (EV-charging load\n      // growing ~30x over the period) — a bolder stroke pulls the eye to it\n      // even though its absolute magnitude is the smallest of the four.\n      lineStyle: { width: isTransportation ? 3.5 : 2, color: t.palette[i] },\n      itemStyle: { color: t.palette[i] },\n      // Full opacity on the (visually thin) Transportation band keeps it crisp\n      // against the Industrial band beneath it; the other bands stay\n      // semi-transparent so the boundary lines between them read clearly.\n      areaStyle: { color: t.palette[i], opacity: isTransportation ? 1 : 0.82 },\n      emphasis: { focus: \"series\" },\n      data: s.data,\n      // Both annotations live on Transportation since it's drawn last (on\n      // top of the other bands), so the dashed line and the shaded band\n      // stay visible instead of being occluded by later area fills.\n      ...(isTransportation && {\n        markLine: {\n          silent: true,\n          symbol: \"none\",\n          lineStyle: { color: t.palette[i], type: \"dashed\", width: 1.5, opacity: 0.7 },\n          label: {\n            color: t.ink,\n            fontSize: 12,\n            fontWeight: 600,\n            formatter: \"EV adoption accelerates\",\n            position: \"insideEndTop\",\n          },\n          data: [{ xAxis: \"2018\" }],\n        },\n        markArea: {\n          silent: true,\n          itemStyle: { color: t.grid },\n          label: {\n            color: t.inkSoft,\n            fontSize: 12,\n            fontWeight: 600,\n            position: \"insideBottom\",\n            formatter: \"2020 downturn\",\n          },\n          data: [[{ xAxis: \"2019\" }, { xAxis: \"2021\" }]],\n        },\n      }),\n    };\n  }),\n});\n"}