{"spec_id":"bar-horizontal","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-horizontal: Horizontal Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 92/100 | Created: 2026-08-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) — most populous countries, ascending ---\n// renders smallest (Mexico) at top to largest (India) at bottom, matching array order.\nconst countries = [\n  \"Mexico\",\n  \"Russia\",\n  \"Bangladesh\",\n  \"Brazil\",\n  \"Nigeria\",\n  \"Pakistan\",\n  \"Indonesia\",\n  \"United States\",\n  \"China\",\n  \"India\",\n];\nconst population = [130, 144, 173, 216, 227, 241, 280, 342, 1425, 1441];\n\n// Highlight the top-ranked country (India) at full brand-green; mute the rest\n// to a lower-opacity tint of the same hue so the largest value reads as the\n// chart's focal point (spec: \"highlight specific bars to draw attention\").\nconst topIndex = population.length - 1;\nconst mutedGreen = Highcharts.color(t.palette[0]).setOpacity(0.5).get();\nconst seriesData = population.map((value, i) => ({\n  y: value,\n  color: i === topIndex ? t.palette[0] : mutedGreen,\n  dataLabels: i === topIndex ? { style: { fontWeight: \"700\" } } : undefined,\n}));\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: \"bar-horizontal · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: countries,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: \"transparent\",\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: {\n      text: \"Population (millions)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    max: 1500,\n    tickInterval: 300,\n    endOnTick: false,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    bar: {\n      borderWidth: 0,\n      pointPadding: 0.15,\n      groupPadding: 0.1,\n      dataLabels: {\n        enabled: true,\n        format: \"{y:,.0f}\",\n        style: {\n          color: t.ink,\n          fontSize: \"14px\",\n          fontWeight: \"500\",\n          textOutline: \"none\",\n        },\n      },\n    },\n  },\n  tooltip: { enabled: false },\n  series: [\n    {\n      name: \"Population\",\n      data: seriesData,\n    },\n  ],\n});\n"}