{"spec_id":"errorbar-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// errorbar-basic: Basic Error Bar Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.0\n// Quality: 92/100 | Created: 2026-06-30\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Enzyme activity measurements across temperature conditions (mean ± SD, n=12 per group)\nconst measurements = [\n    { label: \"20°C\", mean: 18.4, error: 2.3 },\n    { label: \"25°C\", mean: 31.7, error: 3.1 },\n    { label: \"30°C\", mean: 52.3, error: 4.2 },\n    { label: \"35°C\", mean: 67.8, error: 3.8 },\n    { label: \"37°C\", mean: 74.5, error: 5.1 },\n    { label: \"40°C\", mean: 71.2, error: 4.9 },\n    { label: \"45°C\", mean: 48.6, error: 6.3 },\n    { label: \"50°C\", mean: 22.1, error: 3.7 },\n];\n\nconst PEAK_IDX = 4; // 37°C — optimal temperature peak\nconst categories = measurements.map(function (d) { return d.label; });\nconst means = measurements.map(function (d, i) {\n    if (i === PEAK_IDX) {\n        return {\n            y: d.mean,\n            marker: { radius: 11, lineWidth: 3, lineColor: t.pageBg, fillColor: t.palette[0] }\n        };\n    }\n    return d.mean;\n});\n\nHighcharts.chart(\"container\", {\n    chart: {\n        type: \"scatter\",\n        backgroundColor: \"transparent\",\n        animation: false,\n        plotBorderWidth: 0,\n        style: { fontFamily: \"inherit\" },\n        events: {\n            render: function () {\n                const c = this;\n                const series = c.series[0];\n\n                // Clean up SVG overlays from previous renders\n                if (c._errorBars) {\n                    c._errorBars.forEach(function (el) { el.destroy(); });\n                }\n                if (c._peakLabel) { c._peakLabel.destroy(); }\n                c._errorBars = [];\n\n                series.points.forEach(function (point, i) {\n                    const px = point.plotX + c.plotLeft;\n                    const yH = c.yAxis[0].toPixels(measurements[i].mean + measurements[i].error);\n                    const yL = c.yAxis[0].toPixels(measurements[i].mean - measurements[i].error);\n                    const cap = 10;\n                    const col = t.palette[0];\n                    const sw = 2.5;\n\n                    // Vertical stem\n                    c._errorBars.push(\n                        c.renderer.path([\"M\", px, yH, \"L\", px, yL])\n                            .attr({ stroke: col, \"stroke-width\": sw, zIndex: 3 })\n                            .add()\n                    );\n                    // Top cap\n                    c._errorBars.push(\n                        c.renderer.path([\"M\", px - cap, yH, \"L\", px + cap, yH])\n                            .attr({ stroke: col, \"stroke-width\": sw, zIndex: 3 })\n                            .add()\n                    );\n                    // Bottom cap\n                    c._errorBars.push(\n                        c.renderer.path([\"M\", px - cap, yL, \"L\", px + cap, yL])\n                            .attr({ stroke: col, \"stroke-width\": sw, zIndex: 3 })\n                            .add()\n                    );\n                });\n\n                // Focal point annotation at peak 37°C — positioned right of the marker\n                const peakPoint = series.points[PEAK_IDX];\n                const peakPx = peakPoint.plotX + c.plotLeft;\n                const peakAbsY = peakPoint.plotY + c.plotTop;\n                c._peakLabel = c.renderer.text(\n                    \"← Optimal: 37°C\",\n                    peakPx + 15,\n                    peakAbsY + 5\n                )\n                    .attr({ zIndex: 5 })\n                    .css({ color: t.inkSoft, fontSize: \"13px\", fontWeight: \"500\" })\n                    .add();\n            }\n        }\n    },\n    credits: { enabled: false },\n    colors: t.palette,\n    title: {\n        text: \"errorbar-basic · javascript · highcharts · anyplot.ai\",\n        style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" }\n    },\n    subtitle: {\n        text: \"Error bars represent ± 1 standard deviation\",\n        style: { color: t.inkSoft, fontSize: \"14px\" }\n    },\n    xAxis: {\n        categories: categories,\n        lineWidth: 1,\n        lineColor: t.inkSoft,\n        tickColor: t.inkSoft,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n        title: {\n            text: \"Temperature\",\n            style: { color: t.inkSoft, fontSize: \"16px\" }\n        }\n    },\n    yAxis: {\n        min: 0,\n        lineWidth: 1,\n        lineColor: t.inkSoft,\n        title: {\n            text: \"Enzyme Activity (nmol/min)\",\n            style: { color: t.inkSoft, fontSize: \"16px\" }\n        },\n        gridLineColor: t.grid,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } }\n    },\n    legend: { enabled: false },\n    tooltip: { enabled: false },\n    plotOptions: {\n        series: { animation: false },\n        scatter: {\n            marker: {\n                enabled: true,\n                radius: 7,\n                symbol: \"circle\",\n                lineWidth: 2,\n                lineColor: t.pageBg,\n                fillColor: t.palette[0]\n            }\n        }\n    },\n    series: [{\n        name: \"Mean Enzyme Activity\",\n        data: means\n    }]\n});\n"}