Basic Donut Chart in Apache ECharts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Highcharts, MUI X Charts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Basic Donut Chart in Python, R, Julia and JavaScript.

A donut chart (ring chart) showing proportions of categorical data as segments of a ring, with a hollow center. Similar to pie charts but the empty center can display summary statistics or additional information. The ring format can be easier to read when comparing segment sizes.

Basic Donut Chart rendered with Apache ECharts

Renders

JavaScript source (Apache ECharts)

// anyplot.ai
// donut-basic: Basic Donut Chart
// Library: echarts 5.5.1 | JavaScript 22.22.3
// Quality: 90/100 | Created: 2026-06-25
//# anyplot-orientation: square
// anyplot.ai
// donut-basic: Basic Donut Chart
// Library: echarts 5.5.1 | JavaScript 22
// Quality: pending | Created: 2026-06-25

const t = window.ANYPLOT_TOKENS;
const size = window.ANYPLOT_SIZE;

// Data — technology company annual budget allocation
const segments = [
  { name: "R&D", value: 34 },
  { name: "Marketing", value: 22 },
  { name: "Operations", value: 18 },
  { name: "HR & Admin", value: 12 },
  { name: "Infrastructure", value: 9 },
  { name: "Legal & Finance", value: 5 },
];

const cx = size.width * 0.50;
const cy = size.height * 0.46;

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

chart.setOption({
  animation: false,
  color: t.palette,
  backgroundColor: "transparent",

  title: {
    text: "donut-basic · javascript · echarts · anyplot.ai",
    left: "center",
    top: 24,
    textStyle: { color: t.ink, fontSize: 22 },
  },

  legend: {
    orient: "horizontal",
    bottom: "4%",
    left: "center",
    itemWidth: 14,
    itemHeight: 14,
    itemGap: 20,
    textStyle: { color: t.inkSoft, fontSize: 16 },
  },

  graphic: [
    {
      type: "text",
      style: {
        text: "Budget",
        x: cx,
        y: cy - 22,
        textAlign: "center",
        fill: t.ink,
        fontSize: 26,
        fontWeight: "bold",
      },
    },
    {
      type: "text",
      style: {
        text: "Allocation",
        x: cx,
        y: cy + 12,
        textAlign: "center",
        fill: t.inkSoft,
        fontSize: 18,
      },
    },
  ],

  series: [
    {
      type: "pie",
      radius: ["38%", "65%"],
      center: ["50%", "46%"],
      avoidLabelOverlap: true,
      data: segments,
      label: {
        show: true,
        position: "outside",
        formatter: "{d}%",
        color: t.ink,
        fontSize: 16,
        fontWeight: "bold",
      },
      labelLine: {
        lineStyle: { color: t.inkSoft, width: 1.5 },
        length: 15,
        length2: 25,
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: t.pageBg,
        borderRadius: 3,
      },
      emphasis: { disabled: true },
    },
  ],
});

Retrieve this implementation

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

Part of Basic Donut Chart on anyplot.ai.

Other implementations