{"spec_id":"bar-error","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-error: Bar Chart with Error Bars\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) ----------------------------------------\nconst categories = [\"Control\", \"Drug A\", \"Drug B\", \"Drug C\", \"Drug D\", \"Drug E\"];\nconst meanActivity = [42.3, 58.1, 71.4, 49.8, 63.2, 55.6];\nconst stdDev = [4.1, 6.8, 5.2, 7.3, 4.9, 6.1];\n\nconst peakIndex = meanActivity.indexOf(Math.max(...meanActivity));\nconst peakColor = Highcharts.color(t.palette[0]).brighten(0.25).get();\nconst columnData = meanActivity.map((y, i) => ({\n  y,\n  color: i === peakIndex ? peakColor : t.palette[0],\n}));\n\n// Only the core Highcharts bundle is loaded (no highcharts-more), so the\n// errorbar series type isn't available. Error bars are composed instead from\n// a plain \"line\" series: a vertical whisker plus top/bottom caps per category,\n// each segment separated by a null-y gap point so they don't connect to each\n// other. The gap points still carry an explicit `x` — a bare `null` array\n// entry has no x, and Highcharts then auto-indexes it sequentially, which\n// silently stretches the category axis with phantom trailing categories.\n//\n// Cap width is derived from the column's own geometry (point/group padding)\n// rather than a hand-picked constant, so the caps stay visually proportioned\n// to the bar beneath them at ~75% of the column's rendered width.\nconst POINT_PADDING = 0.15;\nconst GROUP_PADDING = 0.1;\nconst BAR_HALF_WIDTH = ((1 - 2 * GROUP_PADDING) * (1 - 2 * POINT_PADDING)) / 2;\nconst CAP_HALF_WIDTH = BAR_HALF_WIDTH * 0.75;\nconst errorBarData = [];\ncategories.forEach((_, i) => {\n  const low = meanActivity[i] - stdDev[i];\n  const high = meanActivity[i] + stdDev[i];\n  errorBarData.push(\n    { x: i - CAP_HALF_WIDTH, y: high },\n    { x: i + CAP_HALF_WIDTH, y: high },\n    { x: i, y: null },\n    { x: i, y: high },\n    { x: i, y: low },\n    { x: i, y: null },\n    { x: i - CAP_HALF_WIDTH, y: low },\n    { x: i + CAP_HALF_WIDTH, y: low },\n    { x: i, y: null },\n  );\n});\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"bar-error · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: `Error bars show ±1 standard deviation · ${categories[peakIndex]} shows the highest mean activity`,\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Enzyme Activity (U/mg)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      borderWidth: 0,\n      borderRadius: 3,\n      pointPadding: POINT_PADDING,\n      groupPadding: GROUP_PADDING,\n    },\n  },\n  series: [\n    {\n      name: \"Enzyme activity\",\n      type: \"column\",\n      data: columnData,\n      showInLegend: false,\n    },\n    {\n      name: \"±1 SD\",\n      type: \"line\",\n      data: errorBarData,\n      color: t.inkSoft,\n      lineWidth: 2.5,\n      marker: { enabled: false },\n      enableMouseTracking: false,\n      showInLegend: false,\n    },\n  ],\n});\n"}