{"spec_id":"bland-altman-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bland-altman-basic: Bland-Altman Agreement Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 93/100 | Created: 2026-08-11\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG) ------------------------------------\nlet seed = 42;\nfunction lcg() {\n  seed = (seed * 1103515245 + 12345) % 2147483648;\n  return seed / 2147483648;\n}\nfunction randNormal() {\n  const u1 = lcg() || 1e-9;\n  const u2 = lcg();\n  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n}\n\n// Paired systolic blood pressure readings from two sphygmomanometers\nconst pairCount = 90;\nconst points = [];\nfor (let i = 0; i < pairCount; i++) {\n  const trueSystolic = 100 + lcg() * 80;\n  const deviceA = trueSystolic + randNormal() * 2.5;\n  const deviceB = trueSystolic + 1.5 + randNormal() * 3;\n  const mean = (deviceA + deviceB) / 2;\n  const diff = deviceA - deviceB;\n  points.push({ x: mean, y: diff, deviceA, deviceB });\n}\n\nconst diffs = points.map((p) => p.y);\nconst bias = diffs.reduce((a, b) => a + b, 0) / diffs.length;\nconst variance =\n  diffs.reduce((a, b) => a + (b - bias) ** 2, 0) / (diffs.length - 1);\nconst sd = Math.sqrt(variance);\nconst upperLoA = bias + 1.96 * sd;\nconst lowerLoA = bias - 1.96 * sd;\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    marginRight: 150,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"bland-altman-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: {\n      text: \"Mean of Two Devices (mmHg)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineWidth: 0,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: {\n      text: \"Difference: Device A − Device B (mmHg)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotBands: [\n      {\n        from: lowerLoA,\n        to: upperLoA,\n        color: Highcharts.color(t.palette[0]).setOpacity(0.07).get(),\n        zIndex: 0,\n      },\n    ],\n    plotLines: [\n      {\n        value: bias,\n        color: t.ink,\n        width: 2,\n        dashStyle: \"Solid\",\n        zIndex: 5,\n        label: {\n          text: `Bias: ${bias.toFixed(1)}`,\n          align: \"right\",\n          textAlign: \"left\",\n          x: 14,\n          y: 4,\n          style: { color: t.ink, fontSize: \"14px\", fontWeight: \"600\" },\n        },\n      },\n      {\n        value: upperLoA,\n        color: t.inkSoft,\n        width: 1.5,\n        dashStyle: \"Dash\",\n        zIndex: 5,\n        label: {\n          text: `+1.96 SD: ${upperLoA.toFixed(1)}`,\n          align: \"right\",\n          textAlign: \"left\",\n          x: 14,\n          y: 4,\n          style: { color: t.inkSoft, fontSize: \"14px\" },\n        },\n      },\n      {\n        value: lowerLoA,\n        color: t.inkSoft,\n        width: 1.5,\n        dashStyle: \"Dash\",\n        zIndex: 5,\n        label: {\n          text: `−1.96 SD: ${lowerLoA.toFixed(1)}`,\n          align: \"right\",\n          textAlign: \"left\",\n          x: 14,\n          y: 4,\n          style: { color: t.inkSoft, fontSize: \"14px\" },\n        },\n      },\n    ],\n  },\n  legend: { enabled: false },\n  tooltip: {\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    style: { color: t.ink, fontSize: \"13px\" },\n    formatter: function () {\n      return (\n        `Device A: ${this.point.deviceA.toFixed(1)} mmHg<br>` +\n        `Device B: ${this.point.deviceB.toFixed(1)} mmHg<br>` +\n        `<b>Difference: ${this.point.y.toFixed(1)} mmHg</b>`\n      );\n    },\n  },\n  plotOptions: {\n    series: { animation: false },\n    scatter: {\n      marker: {\n        radius: 5,\n        fillOpacity: 0.55,\n        lineWidth: 1,\n        lineColor: t.pageBg,\n      },\n    },\n  },\n  series: [\n    {\n      name: \"Paired Measurements\",\n      data: points,\n      color: t.palette[0],\n    },\n  ],\n});\n"}