{"spec_id":"bar-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// bar-basic: Basic Bar Chart\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 93/100 | Created: 2026-06-02\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — monthly book loans at a city library (thousands)\nconst months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n                \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst loans  = [18.4, 21.7, 26.2, 31.5, 35.8, 41.3,\n                47.1, 44.6, 35.9, 29.8, 24.2, 27.6];\n\n// Highlight the seasonal peak; fade the rest for hierarchy\nconst peakIdx = loans.indexOf(Math.max(...loans));\nconst bars = loans.map((v, i) => ({\n  value: v,\n  itemStyle: {\n    color: t.palette[0],\n    opacity: i === peakIdx ? 1 : 0.55,\n    borderRadius: [4, 4, 0, 0],\n  },\n}));\n\n// Init\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// Option\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"Books Borrowed per Month · bar-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 28,\n    textStyle: { color: t.ink, fontSize: 30, fontWeight: 500 },\n  },\n  grid: { left: 110, right: 60, top: 130, bottom: 100, containLabel: false },\n  xAxis: {\n    type: \"category\",\n    data: months,\n    name: \"Month\",\n    nameLocation: \"middle\",\n    nameGap: 50,\n    nameTextStyle: { color: t.ink, fontSize: 24 },\n    axisLabel: { color: t.inkSoft, fontSize: 20, margin: 16 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Loans (thousands)\",\n    nameLocation: \"middle\",\n    nameGap: 78,\n    nameTextStyle: { color: t.ink, fontSize: 24 },\n    axisLabel: { color: t.inkSoft, fontSize: 20, margin: 12 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid, width: 1 } },\n  },\n  series: [{\n    type: \"bar\",\n    data: bars,\n    barWidth: \"62%\",\n    label: {\n      show: true,\n      position: \"top\",\n      color: t.inkSoft,\n      fontSize: 16,\n      formatter: (p) => p.value.toFixed(1),\n    },\n    markLine: {\n      silent: true,\n      symbol: \"none\",\n      data: [{ type: \"average\", name: \"Avg\" }],\n      lineStyle: { color: t.inkSoft, type: \"dashed\", width: 1.5, opacity: 0.8 },\n      label: {\n        color: t.inkSoft,\n        fontSize: 16,\n        position: \"insideEndTop\",\n        formatter: (p) => `Avg ${p.value.toFixed(1)}`,\n      },\n    },\n  }],\n});\n\nwindow.addEventListener(\"resize\", () => chart.resize());\nchart.on(\"finished\", () => { window.__anyplotReady = true; });\n"}