Legend pie chart

Pie Chart styletype: "pie"

Name every slice in a side legend when labels are too long to fit on the pie — perfect for OG images, with data set per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Legend” 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": 190,
        "y": 70
      },
      "rotation": 0,
      "size": {
        "width": 420,
        "height": 280
      },
      "dynamic": true,
      "properties": {
        "variant": "pie",
        "data": [
          40,
          30,
          20,
          10
        ],
        "labels": [
          "North",
          "South",
          "East",
          "West"
        ],
        "colors": [],
        "showValues": false,
        "labelType": "percent",
        "showLegend": true,
        "legendPosition": "right",
        "opacity": 1
      }
    }
  ]
}

Pie Chart examples

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

Acquisition channels OG image

Traffic share with channel names in a right-hand legend instead of on the slices.

API overrides for this example

{
  "share.showValues": false,
  "share.showLegend": true,
  "share.legendPosition": "right",
  "share.data": [
    52,
    23,
    15,
    10
  ],
  "share.labels": [
    "Organic",
    "Paid search",
    "Referral",
    "Email"
  ],
  "share.colors": [
    "#6366F1",
    "#F59E0B",
    "#0EA5E9",
    "#10B981"
  ]
}

Ad spend by platform

Quarterly ad budget share across four platforms on a dark canvas.

API overrides for this example

{
  "share.showValues": false,
  "share.showLegend": true,
  "share.legendPosition": "right",
  "share.data": [
    45,
    30,
    15,
    10
  ],
  "share.labels": [
    "Google Ads",
    "Meta",
    "LinkedIn",
    "TikTok"
  ],
  "share.colors": [
    "#0EA5E9",
    "#6366F1",
    "#10B981",
    "#F472B6"
  ],
  "share.textColor": "#E2E8F0"
}

When to use the legend style

OG images where slice labels would overflow
Reports with longer category names
Small charts that need to stay readable

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": "pie",
    "share.data": [
        40,
        30,
        20,
        10
    ],
    "share.labels": [
        "North",
        "South",
        "East",
        "West"
    ],
    "share.colors": [],
    "share.showValues": false,
    "share.labelType": "percent",
    "share.showLegend": true,
    "share.legendPosition": "right",
    "share.opacity": 1
}'

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

Default Donut Raw valuesLegend

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