{"spec_id":"polar-basic","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// polar-basic: Basic Polar Chart\n// Library: chartjs 4.4.7 | JavaScript 22.23.1\n// Quality: 90/100 | Updated: 2026-07-25\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic): average wind speed by compass direction\nconst directions = [\"N\", \"NE\", \"E\", \"SE\", \"S\", \"SW\", \"W\", \"NW\"];\nconst windSpeeds = [8.2, 6.5, 5.1, 7.8, 11.4, 14.2, 12.6, 9.3];\nconst maxSpeed = Math.max(...windSpeeds);\nconst prevailingIndex = windSpeeds.indexOf(maxSpeed);\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: windSpeeds,\n        backgroundColor: directions.map((_, i) => t.palette[i % t.palette.length]),\n        borderColor: directions.map((_, i) => (i === prevailingIndex ? t.ink : t.pageBg)),\n        borderWidth: directions.map((_, i) => (i === prevailingIndex ? 3 : 2)),\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: {\n        display: true,\n        text: \"polar-basic · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22, weight: \"600\" },\n      },\n      subtitle: {\n        display: true,\n        text: \"Average Wind Speed (km/h) by Compass Direction — SW prevails\",\n        color: t.inkSoft,\n        font: { size: 14, style: \"italic\" },\n        padding: { bottom: 12 },\n      },\n      legend: { display: false },\n    },\n    scales: {\n      r: {\n        beginAtZero: true,\n        max: 15,\n        ticks: {\n          color: t.inkSoft,\n          backdropColor: \"transparent\",\n          font: { size: 14 },\n          stepSize: 5,\n        },\n        grid: { color: t.grid },\n        angleLines: { color: t.grid },\n        pointLabels: { display: true, color: t.ink, font: { size: 16 } },\n      },\n    },\n  },\n});\n"}