Raw values pie chart

Pie Chart styletype: "pie"

Slice labels show the underlying numbers instead of percentages — ideal when absolute values matter — with data swapped per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Raw values” 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": "pie",
        "data": [
          40,
          30,
          20,
          10
        ],
        "labels": [
          "North",
          "South",
          "East",
          "West"
        ],
        "colors": [],
        "showValues": true,
        "labelType": "value",
        "showLegend": true,
        "legendPosition": "bottom",
        "opacity": 1
      }
    }
  ]
}

Pie Chart examples

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

Poll results with vote counts

Community poll answers labeled with the actual number of votes.

API overrides for this example

{
  "share.labelType": "value",
  "share.data": [
    412,
    267,
    98
  ],
  "share.labels": [
    "Yes",
    "No",
    "Undecided"
  ],
  "share.colors": [
    "#10B981",
    "#EF4444",
    "#94A3B8"
  ]
}

Headcount by department

Team sizes per department for an internal all-hands slide image.

API overrides for this example

{
  "share.labelType": "value",
  "share.data": [
    34,
    21,
    12,
    8
  ],
  "share.labels": [
    "Engineering",
    "Sales",
    "Support",
    "Ops"
  ],
  "share.colors": [
    "#6366F1",
    "#0EA5E9",
    "#F59E0B",
    "#94A3B8"
  ]
}

When to use the raw values style

Revenue amounts per segment
Vote counts in poll results
Headcount by department visuals

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": true,
    "share.labelType": "value",
    "share.showLegend": true,
    "share.legendPosition": "bottom",
    "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 DonutRaw valuesLegend

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