Basic Polar Chart — Apache ECharts

A polar chart displays data points on a circular coordinate system where position is determined by angle (theta) and distance from center (radius). This visualization is ideal for cyclical patterns, directional data, or any dataset where angular relationships are meaningful. It reveals periodic trends and directional distributions that would be obscured in Cartesian coordinates.

Basic Polar Chart rendered with Apache ECharts

Renders

JavaScript source (Apache ECharts)

// anyplot.ai
// polar-basic: Basic Polar Chart
// Library: echarts 6.1.0 | JavaScript 22.23.1
// Quality: 92/100 | Updated: 2026-07-25

//# anyplot-orientation: square
const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Wind-direction frequency: percentage of observations the wind blew from
// each of the 16 compass points, with a prevailing wind out of the SW.
const directions = [
  "N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE",
  "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW",
];
const prevailingIndex = directions.indexOf("SW");
const rawWeights = directions.map((_, i) => {
  const steps = directions.length;
  const angularDist = Math.min(
    Math.abs(i - prevailingIndex),
    steps - Math.abs(i - prevailingIndex),
  );
  const gaussian = 27 * Math.exp(-(angularDist ** 2) / (2 * 3.2 ** 2));
  return gaussian + 2.5;
});
const weightSum = rawWeights.reduce((sum, w) => sum + w, 0);
const frequencies = rawWeights.map(
  (w) => Math.round((w / weightSum) * 1000) / 10,
);

// Fill opacity ramps with value (deeper toward the prevailing direction); the
// stroke stays at full brand-green opacity as a light outline on every petal.
function withAlpha(hex, alpha) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
const maxFrequency = Math.max(...frequencies);

// --- Init --------------------------------------------------------------------
const chart = echarts.init(document.getElementById("container"));

// --- Option --------------------------------------------------------------------
chart.setOption({
  animation: false,
  color: t.palette,
  backgroundColor: "transparent",
  title: {
    text: "polar-basic · javascript · echarts · anyplot.ai",
    left: "center",
    top: 24,
    textStyle: { color: t.ink, fontSize: 22 },
  },
  polar: {
    center: ["50%", "56%"],
    radius: "68%",
  },
  angleAxis: {
    type: "category",
    data: directions,
    startAngle: 90,
    clockwise: true,
    axisLine: { lineStyle: { color: t.inkSoft } },
    axisLabel: { color: t.inkSoft, fontSize: 15 },
    splitLine: { lineStyle: { color: t.grid } },
  },
  radiusAxis: {
    type: "value",
    name: "Frequency (%)",
    nameTextStyle: { color: t.inkSoft, fontSize: 13 },
    min: 0,
    axisLine: { show: false },
    axisLabel: { color: t.inkSoft, fontSize: 13 },
    splitLine: { lineStyle: { color: t.grid } },
    splitNumber: 4,
  },
  series: [
    {
      type: "bar",
      coordinateSystem: "polar",
      data: frequencies.map((value) => ({
        value,
        itemStyle: {
          color: withAlpha(t.palette[0], 0.55 + 0.45 * (value / maxFrequency)),
          borderColor: t.palette[0],
          borderWidth: 1,
        },
      })),
      name: "Wind frequency",
      barCategoryGap: "20%",
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/polar-basic/echarts/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": "polar-basic",
  "language": "javascript",
  "library": "echarts",
  "page": "https://anyplot.ai/polar-basic/javascript/echarts",
  "hub": "https://anyplot.ai/polar-basic",
  "code_json": "https://api.anyplot.ai/specs/polar-basic/echarts/code",
  "spec_json": "https://api.anyplot.ai/specs/polar-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/polar-basic/javascript/echarts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/polar-basic/javascript/echarts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/polar-basic/javascript/echarts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/polar-basic/javascript/echarts/plot-dark.html",
  "quality_score": 92.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Polar Chart on anyplot.ai.

Other implementations