Donut pie chart

Pie Chart styletype: "pie"

Generate donut chart images with a configurable hole for a centered metric — slice data updated on every API call. Create donut chart images free.

Edit it — this is the actual editor panel

Design JSON — “Donut” variant

{
  "title": "Pie chart sample",
  "description": "A dynamic pie chart",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-pie",
      "key": "share",
      "type": "pie",
      "position": {
        "x": 250,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 300,
        "height": 300
      },
      "dynamic": true,
      "properties": {
        "variant": "donut",
        "data": [
          40,
          30,
          20,
          10
        ],
        "labels": [
          "North",
          "South",
          "East",
          "West"
        ],
        "colors": [],
        "showValues": true,
        "labelType": "percent",
        "showLegend": true,
        "legendPosition": "bottom",
        "opacity": 1,
        "innerRadius": 0.6
      }
    }
  ]
}

Pie Chart examples

Real renders of the donut pie chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Storage usage by file type

Photos, video, documents and other as a donut for a usage report email.

API overrides for this example

{
  "share.variant": "donut",
  "share.innerRadius": 0.6,
  "share.data": [
    48,
    27,
    15,
    10
  ],
  "share.labels": [
    "Photos",
    "Video",
    "Docs",
    "Other"
  ],
  "share.colors": [
    "#6366F1",
    "#0EA5E9",
    "#F59E0B",
    "#94A3B8"
  ]
}

Portfolio allocation

An investment mix across four asset classes with a roomy center hole.

API overrides for this example

{
  "share.variant": "donut",
  "share.innerRadius": 0.65,
  "share.data": [
    55,
    25,
    12,
    8
  ],
  "share.labels": [
    "Stocks",
    "Bonds",
    "Cash",
    "Crypto"
  ],
  "share.colors": [
    "#10B981",
    "#6366F1",
    "#94A3B8",
    "#F59E0B"
  ]
}

When to use the donut style

KPI share visuals with a number in the middle
Storage or budget usage breakdowns
Modern dashboard-style report images

Use it dynamically via the API

Update slice values with '<key>.data' (or just '<key>') and names with '<key>.labels'; variant and colors are overridable too.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "share.variant": "donut",
    "share.data": [
        40,
        30,
        20,
        10
    ],
    "share.labels": [
        "North",
        "South",
        "East",
        "West"
    ],
    "share.colors": [],
    "share.showValues": true,
    "share.labelType": "percent",
    "share.showLegend": true,
    "share.legendPosition": "bottom",
    "share.opacity": 1,
    "share.innerRadius": 0.6
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other pie chart styles

DefaultDonutRaw values Legend

See the pie chart component page for the full property reference and FAQs.