{"spec_id":"polar-bar","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// polar-bar: Polar Bar Chart (Wind Rose)\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-05\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Share of observed hours the wind blew from each compass direction at a\n// coastal weather station over one year.\nconst directions = [\"N\", \"NE\", \"E\", \"SE\", \"S\", \"SW\", \"W\", \"NW\"];\nconst frequency = [8, 12, 15, 10, 14, 20, 13, 8];\nconst dominantIndex = frequency.indexOf(Math.max(...frequency));\n\n// --- Mount -------------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart -------------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"polarArea\",\n  data: {\n    labels: directions,\n    datasets: [\n      {\n        label: \"Frequency (%)\",\n        data: frequency,\n        backgroundColor: directions.map((_, i) => t.palette[i % t.palette.length]),\n        borderColor: t.pageBg,\n        borderWidth: directions.map((_, i) => (i === dominantIndex ? 5 : 3)),\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: 8 },\n    plugins: {\n      title: {\n        display: true,\n        text: \"Wind Rose · polar-bar · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22 },\n      },\n      subtitle: {\n        display: true,\n        text: \"Radial axis: frequency (% of hours)\",\n        color: t.inkSoft,\n        font: { size: 14 },\n        padding: { bottom: 12 },\n      },\n      legend: {\n        position: \"bottom\",\n        align: \"center\",\n        labels: { color: t.ink, font: { size: 14 }, boxWidth: 16, padding: 12 },\n      },\n    },\n    scales: {\n      r: {\n        ticks: {\n          color: t.inkSoft,\n          backdropColor: \"transparent\",\n          font: { size: 14 },\n        },\n        grid: { color: t.grid },\n        angleLines: { color: t.grid },\n      },\n    },\n  },\n});\n"}