{"spec_id":"area-stacked-percent","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// area-stacked-percent: 100% Stacked Area Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Quarterly portfolio allocation across five asset classes, in $ thousands.\nconst quarters = [\n  \"2022 Q1\", \"2022 Q2\", \"2022 Q3\", \"2022 Q4\",\n  \"2023 Q1\", \"2023 Q2\", \"2023 Q3\", \"2023 Q4\",\n  \"2024 Q1\", \"2024 Q2\", \"2024 Q3\", \"2024 Q4\",\n];\n\nconst equities = [520, 540, 560, 590, 610, 650, 690, 720, 760, 800, 840, 880];\nconst bonds = [380, 370, 360, 350, 330, 310, 290, 270, 250, 230, 210, 190];\nconst realEstate = [150, 155, 160, 165, 175, 180, 185, 190, 195, 200, 205, 210];\nconst commodities = [90, 95, 100, 105, 115, 120, 115, 110, 105, 100, 95, 90];\nconst cash = [110, 105, 95, 85, 80, 75, 70, 65, 60, 55, 50, 45];\n\n// Highlight the equities-share growth story: mark the final quarter with a\n// small anchor point and its exact share, using Highcharts' native\n// per-point dataLabels/marker override (percentage comes from the\n// stacking:\"percent\" engine via `point.percentage`).\nconst lastIndex = quarters.length - 1;\nconst equitiesData = equities.map((y, i) =>\n  i === lastIndex\n    ? {\n        y,\n        marker: { enabled: true, radius: 5, fillColor: t.palette[0], lineColor: t.pageBg, lineWidth: 2 },\n        dataLabels: {\n          enabled: true,\n          format: \"{point.percentage:.0f}%\",\n          align: \"right\",\n          verticalAlign: \"middle\",\n          x: -10,\n          style: { color: t.ink, fontSize: \"16px\", fontWeight: \"700\", textOutline: \"none\" },\n        },\n      }\n    : y\n);\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"area\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    spacingRight: 20,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"area-stacked-percent · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: quarters,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Share of portfolio (%)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      formatter() {\n        return this.value + \"%\";\n      },\n    },\n    min: 0,\n    max: 100,\n  },\n  legend: {\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: \"percent\",\n      lineWidth: 1.5,\n      lineColor: t.pageBg,\n      fillOpacity: 0.9,\n    },\n  },\n  series: [\n    { name: \"Equities\", data: equitiesData, lineWidth: 2.5 },\n    { name: \"Bonds\", data: bonds },\n    { name: \"Real estate\", data: realEstate },\n    { name: \"Commodities\", data: commodities },\n    { name: \"Cash\", data: cash },\n  ],\n});\n"}