{"spec_id":"bullet-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bullet-basic: Basic Bullet Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 86/100 | Created: 2026-08-24\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Quarterly quota attainment (% of quota) across sales regions. Each region\n// carries its own target and qualitative range thresholds — the shared 0-140\n// value axis keeps the rows comparable at a glance.\nconst rows = [\n  { label: \"North America\", actual: 92, target: 100, ranges: [60, 85, 140] },\n  { label: \"EMEA\", actual: 68, target: 90, ranges: [50, 75, 140] },\n  { label: \"APAC\", actual: 118, target: 105, ranges: [65, 90, 140] },\n  { label: \"LATAM\", actual: 54, target: 80, ranges: [45, 70, 140] },\n  { label: \"Global Digital\", actual: 101, target: 95, ranges: [55, 85, 140] },\n];\n\n// Grayscale range-band shading (Stephen Few convention): darkest for the\n// \"poor\" zone, lightening toward \"good\" so the actual bar and target marker\n// stay the visual focus.\nconst bandColors = [\n  Highcharts.color(t.ink).setOpacity(0.3).get(\"rgba\"),\n  Highcharts.color(t.ink).setOpacity(0.18).get(\"rgba\"),\n  Highcharts.color(t.ink).setOpacity(0.08).get(\"rgba\"),\n];\n\n// Stacked range-band segment widths, derived from the cumulative thresholds.\nconst poorData = rows.map((r) => r.ranges[0]);\nconst satisfactoryData = rows.map((r) => r.ranges[1] - r.ranges[0]);\nconst goodData = rows.map((r) => r.ranges[2] - r.ranges[1]);\nconst actualData = rows.map((r) => r.actual);\nconst targetData = rows.map((r, i) => ({ x: i, y: r.target }));\n\n// Custom symbol: a thin vertical tick, perpendicular to the horizontal bars,\n// marking the target — built from core Highcharts primitives (no add-on\n// module needed for a bullet-chart target marker).\nHighcharts.SVGRenderer.prototype.symbols.targettick = function (x, y, w, h) {\n  const cx = x + w / 2;\n  return [\"M\", cx, y, \"L\", cx, y + h, \"Z\"];\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  title: {\n    text: \"bullet-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Quarterly quota attainment by sales region\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories: rows.map((r) => r.label),\n    reversed: true,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    min: 0,\n    max: 140,\n    tickInterval: 20,\n    reversedStacks: false,\n    title: {\n      text: \"% of Quarterly Quota\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      format: \"{value}%\",\n    },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false, pointPadding: 0.08, groupPadding: 0.12 },\n    bar: { borderWidth: 0 },\n  },\n  series: [\n    {\n      name: \"Poor\",\n      data: poorData,\n      color: bandColors[0],\n      stacking: \"normal\",\n      showInLegend: true,\n    },\n    {\n      name: \"Satisfactory\",\n      data: satisfactoryData,\n      color: bandColors[1],\n      stacking: \"normal\",\n      showInLegend: true,\n    },\n    {\n      name: \"Good\",\n      data: goodData,\n      color: bandColors[2],\n      stacking: \"normal\",\n      showInLegend: true,\n    },\n    {\n      name: \"Actual\",\n      type: \"bar\",\n      data: actualData,\n      color: t.palette[0],\n      pointWidth: 22,\n      grouping: false,\n      showInLegend: true,\n      dataLabels: {\n        enabled: true,\n        format: \"{y}%\",\n        style: {\n          color: t.ink,\n          fontSize: \"14px\",\n          fontWeight: \"600\",\n          textOutline: \"none\",\n        },\n      },\n    },\n    {\n      name: \"Target\",\n      type: \"scatter\",\n      data: targetData,\n      showInLegend: true,\n      marker: {\n        symbol: \"targettick\",\n        radius: 16,\n        fillColor: \"transparent\",\n        lineColor: t.ink,\n        lineWidth: 3,\n      },\n    },\n  ],\n});\n"}