{"spec_id":"bar-heart-rate-zones","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-heart-rate-zones: Time in Heart Rate Zones Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 91/100 | Created: 2026-06-14\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Zone colors follow fitness convention (semantic exception to ordinal Imprint order):\n// Z1 static #6B6A63 (grey/recovery — same in both themes, satisfies data-colors-identical rule),\n// Z2 blue, Z3 brand green, Z4 ochre, Z5 red\nconst categories = [\n    'Z1 Recovery<br><span style=\"font-size:11px\">95–124 bpm</span>',\n    'Z2 Endurance<br><span style=\"font-size:11px\">125–148 bpm</span>',\n    'Z3 Aerobic<br><span style=\"font-size:11px\">149–163 bpm</span>',\n    'Z4 Threshold<br><span style=\"font-size:11px\">164–178 bpm</span>',\n    'Z5 Maximum<br><span style=\"font-size:11px\">179–190 bpm</span>',\n];\n\nHighcharts.chart(\"container\", {\n    chart: {\n        type: \"column\",\n        backgroundColor: \"transparent\",\n        animation: false,\n        style: { fontFamily: \"inherit\" },\n        spacingTop: 24,\n        spacingBottom: 32,\n        spacingLeft: 20,\n        spacingRight: 20,\n    },\n    credits: { enabled: false },\n    title: {\n        text: \"bar-heart-rate-zones · javascript · highcharts · anyplot.ai\",\n        style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n        margin: 8,\n    },\n    subtitle: {\n        text: \"60-minute criterium road race · Z2 Endurance dominant at 33% of session\",\n        style: { color: t.inkSoft, fontSize: \"14px\" },\n        margin: 20,\n    },\n    xAxis: {\n        categories,\n        lineColor: t.inkSoft,\n        tickColor: \"transparent\",\n        labels: {\n            useHTML: true,\n            style: { color: t.inkSoft, fontSize: \"14px\", textAlign: \"center\" },\n            y: 20,\n        },\n        gridLineWidth: 0,\n    },\n    yAxis: {\n        title: {\n            text: \"Time (minutes)\",\n            style: { color: t.inkSoft, fontSize: \"16px\" },\n        },\n        gridLineColor: t.grid,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n        min: 0,\n        tickInterval: 5,\n        // Reference line at session mean (60 min ÷ 5 zones = 12 min avg)\n        plotLines: [{\n            value: 12,\n            color: t.inkSoft,\n            dashStyle: \"Dash\",\n            width: 1.5,\n            label: {\n                text: \"avg 12:00\",\n                style: { color: t.inkSoft, fontSize: \"12px\" },\n                align: \"right\",\n                x: -4,\n            },\n            zIndex: 3,\n        }],\n    },\n    legend: { enabled: false },\n    tooltip: { enabled: false },\n    plotOptions: {\n        series: { animation: false },\n        column: {\n            borderWidth: 0,\n            borderRadius: 5,\n            pointPadding: 0.12,\n            groupPadding: 0.2,\n            dataLabels: {\n                enabled: true,\n                formatter: function () {\n                    const m = Math.floor(this.y);\n                    const s = Math.round((this.y % 1) * 60);\n                    return `${m}:${String(s).padStart(2, \"0\")}`;\n                },\n                style: {\n                    color: t.ink,\n                    fontSize: \"18px\",\n                    fontWeight: \"700\",\n                    textOutline: \"none\",\n                },\n                verticalAlign: \"top\",\n                y: -28,\n            },\n        },\n    },\n    series: [{\n        name: \"Time in Zone\",\n        colorByPoint: true,\n        data: [\n            { y: 8,  color: \"#6B6A63\" },\n            // Z2 is the dominant zone — larger label emphasises the focal insight\n            { y: 20, color: \"#4467A3\", dataLabels: { style: { fontSize: \"22px\", fontWeight: \"800\" } } },\n            { y: 17, color: \"#009E73\" },\n            { y: 9,  color: \"#BD8233\" },\n            { y: 6,  color: \"#AE3030\" },\n        ],\n    }],\n});\n"}