{"spec_id":"radar-multi","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// radar-multi: Multi-Series Radar Chart\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 94/100 | Updated: 2026-08-18\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Wireless headphone models scored on a 0-100 scale across six attributes.\nconst categories = [\n  \"Sound Quality\",\n  \"Battery Life\",\n  \"Comfort\",\n  \"Noise Cancelling\",\n  \"Build Quality\",\n  \"Value\",\n];\n\n// AuraSound Studio leads on the two attributes buyers weigh most (Sound\n// Quality, Noise Cancelling), so it is drawn as the featured pick.\nconst models = [\n  {\n    name: \"AuraSound Studio\",\n    scores: [88, 72, 80, 90, 75, 65],\n    pointStyle: \"circle\",\n    featured: true,\n  },\n  {\n    name: \"PulseWave Air\",\n    scores: [70, 95, 85, 60, 82, 78],\n    pointStyle: \"triangle\",\n  },\n  {\n    name: \"EchoFit Sport\",\n    scores: [65, 60, 92, 55, 68, 90],\n    pointStyle: \"rectRot\",\n  },\n];\n\n// --- Mount -------------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart ---------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"radar\",\n  data: {\n    labels: categories,\n    datasets: models.map((model, i) => {\n      const color = t.palette[i % t.palette.length];\n      return {\n        label: model.name,\n        // 8-digit hex appends an alpha channel; keeps the fill in the\n        // spec's 0.2-0.3 range without a hex->rgba helper.\n        backgroundColor: color + (model.featured ? \"4D\" : \"33\"),\n        data: model.scores,\n        borderColor: color,\n        borderWidth: model.featured ? 4 : 2,\n        pointStyle: model.pointStyle,\n        pointBackgroundColor: color,\n        pointBorderColor: t.pageBg,\n        pointBorderWidth: 2,\n        pointRadius: model.featured ? 6 : 4,\n        pointHoverRadius: model.featured ? 8 : 6,\n        order: model.featured ? 0 : 1,\n      };\n    }),\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: {\n        display: true,\n        text: \"radar-multi · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22 },\n        padding: { bottom: 24 },\n      },\n      legend: {\n        position: \"bottom\",\n        labels: { color: t.ink, font: { size: 16 }, padding: 20 },\n      },\n    },\n    scales: {\n      r: {\n        min: 0,\n        max: 100,\n        ticks: {\n          stepSize: 20,\n          color: t.inkSoft,\n          font: { size: 12 },\n          backdropColor: \"transparent\",\n        },\n        grid: { color: t.grid, circular: true },\n        angleLines: { color: t.grid },\n        pointLabels: { color: t.ink, font: { size: 16 } },\n      },\n    },\n  },\n});\n"}