{"spec_id":"pyramid-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// pyramid-basic: Basic Pyramid Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 95/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Population by age group, thousands of residents\nconst ageGroups = [\"0-9\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70+\"];\nconst malePopulation = [42, 45, 47, 44, 39, 33, 24, 15];\nconst femalePopulation = [40, 43, 45, 43, 40, 36, 29, 22];\nconst axisMax = 50;\n\n// --- Init -------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option -----------------------------------------------------------------\n// Three-grid layout: left bars (male) + centered label column (age groups) +\n// right bars (female), so the shared category axis sits on the pyramid's\n// central spine instead of on one outer edge.\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"pyramid-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 30,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  legend: {\n    data: [\"Male\", \"Female\"],\n    top: 78,\n    textStyle: { color: t.inkSoft, fontSize: 14 },\n  },\n  tooltip: {\n    trigger: \"axis\",\n    axisPointer: { type: \"shadow\" },\n    valueFormatter: (value) => `${Math.abs(value)}k`,\n  },\n  grid: [\n    { left: \"4%\", width: \"42%\", top: 150, bottom: 120 },\n    { left: \"46%\", width: \"8%\", top: 150, bottom: 120 },\n    { left: \"54%\", width: \"42%\", top: 150, bottom: 120 },\n  ],\n  xAxis: [\n    {\n      type: \"value\",\n      gridIndex: 0,\n      inverse: true,\n      min: 0,\n      max: axisMax,\n      name: \"Population (thousands)\",\n      nameLocation: \"middle\",\n      nameGap: 40,\n      nameTextStyle: { color: t.inkSoft, fontSize: 13 },\n      axisLabel: { color: t.inkSoft, fontSize: 14, formatter: \"{value}k\" },\n      axisLine: { lineStyle: { color: t.grid, width: 1 } },\n      splitLine: { lineStyle: { color: t.grid } },\n    },\n    { type: \"value\", gridIndex: 1, min: 0, max: 1, show: false },\n    {\n      type: \"value\",\n      gridIndex: 2,\n      min: 0,\n      max: axisMax,\n      name: \"Population (thousands)\",\n      nameLocation: \"middle\",\n      nameGap: 40,\n      nameTextStyle: { color: t.inkSoft, fontSize: 13 },\n      axisLabel: { color: t.inkSoft, fontSize: 14, formatter: \"{value}k\" },\n      axisLine: { lineStyle: { color: t.grid, width: 1 } },\n      splitLine: { lineStyle: { color: t.grid } },\n    },\n  ],\n  yAxis: [\n    { type: \"category\", gridIndex: 0, data: ageGroups, show: false },\n    {\n      type: \"category\",\n      gridIndex: 1,\n      data: ageGroups,\n      position: \"left\",\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: { color: t.ink, fontSize: 14, align: \"left\", margin: 0 },\n    },\n    { type: \"category\", gridIndex: 2, data: ageGroups, show: false },\n  ],\n  series: [\n    {\n      name: \"Male\",\n      type: \"bar\",\n      xAxisIndex: 0,\n      yAxisIndex: 0,\n      data: malePopulation,\n      barWidth: \"65%\",\n      itemStyle: { color: t.palette[0] },\n      // Subtle highlight over the two oldest cohorts, where female population\n      // overtakes male — the most notable feature in this dataset.\n      markArea: {\n        silent: true,\n        itemStyle: { color: t.amber, opacity: 0.08 },\n        data: [[{ yAxis: \"60-69\" }, { yAxis: \"70+\" }]],\n      },\n    },\n    {\n      name: \"Female\",\n      type: \"bar\",\n      xAxisIndex: 2,\n      yAxisIndex: 2,\n      data: femalePopulation,\n      barWidth: \"65%\",\n      itemStyle: { color: t.palette[1] },\n      markArea: {\n        silent: true,\n        itemStyle: { color: t.amber, opacity: 0.08 },\n        label: {\n          show: true,\n          position: \"insideTop\",\n          formatter: \"Female exceeds\\nMale past 60\",\n          color: t.inkSoft,\n          fontSize: 12,\n          lineHeight: 15,\n        },\n        data: [[{ yAxis: \"60-69\" }, { yAxis: \"70+\" }]],\n      },\n    },\n  ],\n});\n"}