{"spec_id":"errorbar-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// errorbar-basic: Basic Error Bar Plot\n// Library: echarts 5.5.1 | JavaScript 22.23.0\n// Quality: 91/100 | Created: 2026-06-30\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Wheat vs barley grain yield response to nitrogen fertilization\n// (7 N dose levels, n=5 field replicates per variety)\nconst doses = [\"0\", \"50\", \"100\", \"150\", \"200\", \"250\", \"300\"];\n\nconst wheatMeans  = [2.1, 3.5, 4.8, 5.6, 5.9, 5.8, 5.4];\nconst wheatErrors = [0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];\n\n// Barley: lower baseline, earlier N saturation than wheat\nconst barleyMeans  = [1.8, 2.9, 3.8, 4.2, 4.3, 4.1, 3.8];\nconst barleyErrors = [0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];\n\nconst WHEAT  = t.palette[0];  // #009E73 — brand green (first series)\nconst BARLEY = t.palette[1];  // #C475FD — lavender\n\nfunction mkErrData(means, errors) {\n  return means.map(function(m, i) { return [i, m + errors[i], m - errors[i]]; });\n}\nfunction mkScatData(means) {\n  return means.map(function(m, i) { return [i, m]; });\n}\n\n// Factory: creates a renderItem callback for error bars in the given color\nfunction makeRenderItem(color) {\n  return function(params, api) {\n    var x  = api.value(0);\n    var hi = api.coord([x, api.value(1)]);\n    var lo = api.coord([x, api.value(2)]);\n    var cw = 18, lw = 3;\n    return {\n      type: \"group\",\n      children: [\n        { type: \"line\", shape: { x1: hi[0], y1: hi[1], x2: lo[0], y2: lo[1] }, style: { stroke: color, lineWidth: lw } },\n        { type: \"line\", shape: { x1: hi[0]-cw, y1: hi[1], x2: hi[0]+cw, y2: hi[1] }, style: { stroke: color, lineWidth: lw } },\n        { type: \"line\", shape: { x1: lo[0]-cw, y1: lo[1], x2: lo[0]+cw, y2: lo[1] }, style: { stroke: color, lineWidth: lw } }\n      ]\n    };\n  };\n}\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"errorbar-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22 }\n  },\n  legend: {\n    data: [\n      { name: \"Wheat\", icon: \"circle\" },\n      { name: \"Barley\", icon: \"circle\" }\n    ],\n    top: 52,\n    textStyle: { color: t.ink, fontSize: 14 }\n  },\n  grid: { left: 120, right: 80, top: 100, bottom: 90 },\n  xAxis: {\n    type: \"category\",\n    data: doses,\n    name: \"Nitrogen Dose (kg N/ha)\",\n    nameLocation: \"middle\",\n    nameGap: 50,\n    nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { show: false }\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Grain Yield (t/ha)\",\n    nameLocation: \"middle\",\n    nameGap: 65,\n    nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n    min: 0,\n    max: 7,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } }\n  },\n  series: [\n    // Wheat error bars — custom renderer for stems + caps\n    {\n      name: \"Wheat\",\n      type: \"custom\",\n      itemStyle: { color: WHEAT },\n      dimensions: [\"xIdx\", \"yHigh\", \"yLow\"],\n      encode: { x: 0, y: [1, 2] },\n      renderItem: makeRenderItem(WHEAT),\n      data: mkErrData(wheatMeans, wheatErrors),\n      z: 3\n    },\n    // Wheat center-value markers + optimal N zone annotation\n    {\n      name: \"Wheat\",\n      type: \"scatter\",\n      data: mkScatData(wheatMeans),\n      symbolSize: 14,\n      itemStyle: { color: WHEAT, borderColor: t.pageBg, borderWidth: 2 },\n      z: 4,\n      markArea: {\n        silent: true,\n        itemStyle: { color: WHEAT, opacity: 0.07 },\n        label: {\n          show: true,\n          formatter: \"Optimal N zone\\n(100–250 kg/ha)\",\n          color: t.inkSoft,\n          fontSize: 12,\n          position: \"insideTopLeft\",\n          distance: 8\n        },\n        data: [[{ xAxis: \"100\" }, { xAxis: \"250\" }]]\n      }\n    },\n    // Barley error bars\n    {\n      name: \"Barley\",\n      type: \"custom\",\n      itemStyle: { color: BARLEY },\n      dimensions: [\"xIdx\", \"yHigh\", \"yLow\"],\n      encode: { x: 0, y: [1, 2] },\n      renderItem: makeRenderItem(BARLEY),\n      data: mkErrData(barleyMeans, barleyErrors),\n      z: 3\n    },\n    // Barley center-value markers\n    {\n      name: \"Barley\",\n      type: \"scatter\",\n      data: mkScatData(barleyMeans),\n      symbolSize: 14,\n      itemStyle: { color: BARLEY, borderColor: t.pageBg, borderWidth: 2 },\n      z: 4\n    }\n  ]\n});\n"}