Basic Rose Chart — Chart.js

A rose chart (also called Nightingale or coxcomb diagram) displays categorical data in a circular format where segments are arranged around the center like pie slices, but with radius proportional to the value rather than angle. This visualization excels at showing cyclical or directional patterns where the circular arrangement has natural meaning. The equal-angle wedges make comparison of values across categories intuitive while emphasizing the periodic nature of the data.

Basic Rose Chart rendered with Chart.js

Renders

JavaScript source (Chart.js)

// anyplot.ai
// rose-basic: Basic Rose Chart
// Library: chartjs 4.4.7 | JavaScript 22.23.1
// Quality: 95/100 | Created: 2026-07-25

//# anyplot-orientation: square

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Annual wind direction frequency at a coastal station — prevailing westerlies.
// N and NW (the two wedges touching the top radial axis) are kept in the same
// tick band on purpose: Chart.js draws the r-scale's numeric labels only along
// that top axis, and an opaque wedge reaching past a ring on just one side of
// it visually eats half the label — keeping both wedges below the 10% ring
// avoids that split.
const directions = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
const frequencyPct = [8, 11, 9, 6, 15, 19, 24, 8];
const dominantDirection = "W";

// --- Mount -------------------------------------------------------------------
const canvas = document.createElement("canvas");
document.getElementById("container").appendChild(canvas);

// --- Chart ---------------------------------------------------------------
new Chart(canvas, {
  type: "polarArea",
  data: {
    labels: directions,
    datasets: [
      {
        data: frequencyPct,
        backgroundColor: t.palette,
        borderColor: t.pageBg,
        // Scriptable width: give the prevailing direction (W, 24%) a heavier
        // outline so the "prevailing wind" takeaway reads at a glance.
        borderWidth: (ctx) =>
          directions[ctx.dataIndex] === dominantDirection ? 5 : 2,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: false,
    startAngle: 0,
    layout: { padding: 24 },
    plugins: {
      title: {
        display: true,
        text: "rose-basic · javascript · chartjs · anyplot.ai",
        color: t.ink,
        font: { size: 24, weight: "bold" },
        padding: { bottom: 4 },
      },
      subtitle: {
        display: true,
        text: "Prevailing wind: W (24%) → SW (19%) → S (15%)",
        color: t.inkSoft,
        font: { size: 15, style: "italic" },
        padding: { bottom: 16 },
      },
      legend: { display: false },
    },
    scales: {
      r: {
        beginAtZero: true,
        ticks: {
          color: t.inkSoft,
          backdropColor: "transparent",
          font: { size: 14 },
          callback: (value) => `${value}%`,
        },
        grid: { color: t.grid, lineWidth: 1, circular: true },
        angleLines: { color: t.grid, lineWidth: 1 },
        pointLabels: {
          display: true,
          color: t.ink,
          font: (ctx) => ({
            size: 16,
            weight:
              directions[ctx.index] === dominantDirection ? "bold" : "normal",
          }),
        },
      },
    },
  },
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/rose-basic/chartjs/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "rose-basic",
  "language": "javascript",
  "library": "chartjs",
  "page": "https://anyplot.ai/rose-basic/javascript/chartjs",
  "hub": "https://anyplot.ai/rose-basic",
  "code_json": "https://api.anyplot.ai/specs/rose-basic/chartjs/code",
  "spec_json": "https://api.anyplot.ai/specs/rose-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/rose-basic/javascript/chartjs/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/rose-basic/javascript/chartjs/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/rose-basic/javascript/chartjs/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/rose-basic/javascript/chartjs/plot-dark.html",
  "quality_score": 95.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Rose Chart on anyplot.ai.

Other implementations