{"spec_id":"pyramid-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// pyramid-basic: Basic Pyramid Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Population by age group, in thousands. Male shown as negative (left side).\nconst ageGroups = [\n  \"0-9\",\n  \"10-19\",\n  \"20-29\",\n  \"30-39\",\n  \"40-49\",\n  \"50-59\",\n  \"60-69\",\n  \"70-79\",\n  \"80+\",\n];\nconst malePopulation = [2450, 2510, 2680, 2920, 3050, 3280, 2870, 1950, 980];\nconst femalePopulation = [2340, 2400, 2550, 2810, 2990, 3210, 2950, 2180, 1420];\nconst peakAgeGroup = \"50-59\"; // widest bulge on both sides, called out below\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"bar\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"pyramid-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: [\n    {\n      categories: ageGroups,\n      reversed: false,\n      lineColor: t.inkSoft,\n      tickColor: t.inkSoft,\n      labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n      title: {\n        text: \"Age Group\",\n        style: { color: t.inkSoft, fontSize: \"16px\" },\n      },\n    },\n    {\n      categories: ageGroups,\n      opposite: true,\n      reversed: false,\n      linkedTo: 0,\n      lineColor: t.inkSoft,\n      tickColor: t.inkSoft,\n      labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n      title: { text: null },\n    },\n  ],\n  yAxis: {\n    min: -3500,\n    max: 3500,\n    tickInterval: 1000,\n    gridLineColor: t.grid,\n    title: {\n      text: \"Population\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      formatter() {\n        return Math.abs(this.value) + \"k\";\n      },\n    },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: {\n    formatter() {\n      return `${this.series.name}, ${this.point.category}: ${Math.abs(this.point.y)}k`;\n    },\n  },\n  plotOptions: {\n    series: {\n      animation: false,\n      stacking: \"normal\",\n      borderWidth: 0,\n      pointPadding: 0.1,\n      groupPadding: 0,\n      dataLabels: {\n        enabled: true,\n        style: {\n          color: t.ink,\n          fontSize: \"13px\",\n          fontWeight: \"700\",\n          textOutline: \"none\",\n        },\n        formatter() {\n          if (this.point.category !== peakAgeGroup) return null;\n          return `${Math.abs(this.y)}k peak`;\n        },\n      },\n    },\n  },\n  series: [\n    { name: \"Male\", data: malePopulation.map((v) => -v) },\n    { name: \"Female\", data: femalePopulation },\n  ],\n});\n"}