{"spec_id":"rose-basic","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// rose-basic: Basic Rose Chart\n// Library: chartjs 4.4.7 | JavaScript 22.23.1\n// Quality: 95/100 | Created: 2026-07-25\n\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Annual wind direction frequency at a coastal station — prevailing westerlies.\n// N and NW (the two wedges touching the top radial axis) are kept in the same\n// tick band on purpose: Chart.js draws the r-scale's numeric labels only along\n// that top axis, and an opaque wedge reaching past a ring on just one side of\n// it visually eats half the label — keeping both wedges below the 10% ring\n// avoids that split.\nconst directions = [\"N\", \"NE\", \"E\", \"SE\", \"S\", \"SW\", \"W\", \"NW\"];\nconst frequencyPct = [8, 11, 9, 6, 15, 19, 24, 8];\nconst dominantDirection = \"W\";\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        data: frequencyPct,\n        backgroundColor: t.palette,\n        borderColor: t.pageBg,\n        // Scriptable width: give the prevailing direction (W, 24%) a heavier\n        // outline so the \"prevailing wind\" takeaway reads at a glance.\n        borderWidth: (ctx) =>\n          directions[ctx.dataIndex] === dominantDirection ? 5 : 2,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    startAngle: 0,\n    layout: { padding: 24 },\n    plugins: {\n      title: {\n        display: true,\n        text: \"rose-basic · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 24, weight: \"bold\" },\n        padding: { bottom: 4 },\n      },\n      subtitle: {\n        display: true,\n        text: \"Prevailing wind: W (24%) → SW (19%) → S (15%)\",\n        color: t.inkSoft,\n        font: { size: 15, style: \"italic\" },\n        padding: { bottom: 16 },\n      },\n      legend: { display: false },\n    },\n    scales: {\n      r: {\n        beginAtZero: true,\n        ticks: {\n          color: t.inkSoft,\n          backdropColor: \"transparent\",\n          font: { size: 14 },\n          callback: (value) => `${value}%`,\n        },\n        grid: { color: t.grid, lineWidth: 1, circular: true },\n        angleLines: { color: t.grid, lineWidth: 1 },\n        pointLabels: {\n          display: true,\n          color: t.ink,\n          font: (ctx) => ({\n            size: 16,\n            weight:\n              directions[ctx.index] === dominantDirection ? \"bold\" : \"normal\",\n          }),\n        },\n      },\n    },\n  },\n});\n"}