{"spec_id":"bar-basic","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// bar-basic: Basic Bar Chart\n// Library: chartjs 4.4.7 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-02\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — quarterly revenue (USD millions) by product line\nconst labels = [\n  \"Apparel\",\n  \"Footwear\",\n  \"Accessories\",\n  \"Equipment\",\n  \"Eyewear\",\n  \"Wellness\",\n];\nconst revenue = [42.8, 51.3, 18.9, 33.7, 12.4, 27.1];\n\n// Focal-point treatment: brand green for the top performer, muted ink for the\n// rest. Spec explicitly invites \"highlight specific bars to draw attention\".\nconst maxIdx = revenue.indexOf(Math.max(...revenue));\nconst barColors = revenue.map((_, i) =>\n  i === maxIdx ? t.palette[0] : t.inkSoft,\n);\nconst hoverColors = revenue.map((_, i) =>\n  i === maxIdx ? t.palette[0] : t.ink,\n);\n\n// Custom Chart.js plugin — draws each bar's value just above its top edge so\n// readers can pick up the exact figure without hovering. Uses theme-adaptive\n// ink and a heavier weight on the leader so it reads as the focal point.\nconst valueLabels = {\n  id: \"valueLabels\",\n  afterDatasetsDraw(chart) {\n    const { ctx } = chart;\n    const meta = chart.getDatasetMeta(0);\n    ctx.save();\n    ctx.textAlign = \"center\";\n    ctx.textBaseline = \"bottom\";\n    meta.data.forEach((bar, i) => {\n      const isLeader = i === maxIdx;\n      ctx.fillStyle = isLeader ? t.palette[0] : t.inkSoft;\n      ctx.font = `${isLeader ? 600 : 500} ${isLeader ? 18 : 15}px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`;\n      ctx.fillText(revenue[i].toFixed(1), bar.x, bar.y - 8);\n    });\n    ctx.restore();\n  },\n};\n\n// Mount\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// Chart\nnew Chart(canvas, {\n  type: \"bar\",\n  data: {\n    labels,\n    datasets: [\n      {\n        label: \"Revenue (USD millions)\",\n        data: revenue,\n        backgroundColor: barColors,\n        hoverBackgroundColor: hoverColors,\n        borderWidth: 0,\n        borderRadius: 4,\n        categoryPercentage: 0.72,\n        barPercentage: 0.92,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 36, right: 24, bottom: 8, left: 8 } },\n    plugins: {\n      title: {\n        display: true,\n        text: \"bar-basic · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22, weight: \"500\" },\n        padding: { top: 4, bottom: 24 },\n      },\n      legend: { display: false },\n      tooltip: {\n        backgroundColor: t.elevatedBg,\n        titleColor: t.ink,\n        bodyColor: t.inkSoft,\n        borderColor: t.grid,\n        borderWidth: 1,\n        padding: 12,\n        titleFont: { size: 14, weight: \"600\" },\n        bodyFont: { size: 13 },\n        displayColors: false,\n        callbacks: {\n          label: (ctx) => `$${ctx.parsed.y.toFixed(1)} million`,\n        },\n      },\n    },\n    scales: {\n      x: {\n        title: {\n          display: true,\n          text: \"Product line\",\n          color: t.ink,\n          font: { size: 16 },\n          padding: { top: 12 },\n        },\n        ticks: { color: t.inkSoft, font: { size: 16 } },\n        grid: { display: false },\n        border: { display: false },\n      },\n      y: {\n        title: {\n          display: true,\n          text: \"Revenue (USD millions)\",\n          color: t.ink,\n          font: { size: 16 },\n          padding: { bottom: 12 },\n        },\n        ticks: { color: t.inkSoft, font: { size: 16 } },\n        grid: { color: t.grid, drawTicks: false },\n        border: { display: false },\n        beginAtZero: true,\n      },\n    },\n  },\n  plugins: [valueLabels],\n});\n"}