Embed Pie Charts & URL API Documentation

Use shareable URLs as a lightweight API to create and embed pie charts anywhere. No server required — all data is encoded in the URL.

URL Parameters Reference

Create pie charts by adding parameters to the base URL: https://makepiechart.com/

Parameter Type Description Example
data comma-separated numbers The values for each pie slice 40,30,20,10
labels comma-separated strings Names for each slice (URL encoded) Sales,Marketing,R%26D,Other
colors comma-separated hex codes Custom colors for each slice (without #) 3b82f6,10b981,f59e0b,ef4444
title string Chart title (URL encoded) Q1%20Revenue%20Breakdown
style number 0 = pie, 0.55 = donut, 0.7 = thin donut 0.55
label string Label display: percent, value, label, both, none percent
sort string Sort order: none, desc, asc desc
start number Start angle in degrees: -90 (top), 0 (right), 90 (bottom), 180 (left) -90
legend boolean Show legend: true or false true

Complete Example URL

https://makepiechart.com/?data=45,30,15,10&labels=Product%20A,Product%20B,Product%20C,Other&colors=2563eb,10b981,f59e0b,6b7280&title=Sales%20Distribution&style=0.55&label=percent
Open in Chart Maker →

Embed in a Website

Use an iframe to embed a live, interactive pie chart in any website. The chart will be responsive and honor the user's dark/light mode preference.

Basic iframe Embed

<iframe
  src="https://makepiechart.com/?data=40,30,30&labels=A,B,C"
  width="600"
  height="400"
  frameborder="0"
  style="border-radius: 8px;">
</iframe>

Responsive iframe Embed

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://makepiechart.com/?data=40,30,30&labels=A,B,C"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
    frameborder="0">
  </iframe>
</div>

Static Image Alternative

For platforms that don't support iframes, export your chart as PNG or SVG:

  1. Create your chart at makepiechart.com
  2. Click "Download PNG" or "Download SVG"
  3. Use the image file in your HTML: <img src="chart.png" alt="Pie chart">

Embed in Popular Platforms

Notion

  1. Create your chart and copy the shareable URL
  2. In Notion, type /embed and press Enter
  3. Paste the chart URL
  4. Adjust the embed size as needed

Google Docs / Slides

  1. Create your chart and download as PNG
  2. In Google Docs/Slides, go to Insert → Image
  3. Upload the PNG file
  4. Resize and position as needed

Microsoft PowerPoint / Word

  1. Create your chart and download as PNG or SVG
  2. In PowerPoint/Word, go to Insert → Pictures
  3. Select your chart file
  4. Use SVG for scalable graphics that won't pixelate

WordPress

  1. Copy the iframe embed code from above
  2. In WordPress editor, add a Custom HTML block
  3. Paste the iframe code
  4. Preview and publish your post/page

Medium / Substack

  1. Create your chart and download as PNG
  2. In your article, add an image block
  3. Upload the PNG file
  4. Add alt text describing the chart data

Bookmarklet for Quick Access

Save pre-configured charts as bookmarks for repeated use. Perfect for teachers, analysts, or anyone who creates similar charts regularly.

How to Create a Chart Bookmarklet

  1. Create your chart template with placeholder data
  2. Click "Share" to get the URL
  3. Bookmark the URL in your browser
  4. Name it something descriptive like "Quarterly Sales Chart"
  5. Click the bookmark anytime to load your template
  6. Update the values and export

Example Bookmarklet URLs

# Monthly Budget Tracker
https://makepiechart.com/?data=0,0,0,0&labels=Rent,Food,Transport,Other&title=March%20Budget

# Student Grade Distribution
https://makepiechart.com/?data=0,0,0,0,0&labels=A,B,C,D,F&colors=10b981,84cc16,fbbf24,f97316,ef4444

# Project Time Allocation
https://makepiechart.com/?data=0,0,0,0&labels=Development,Testing,Documentation,Meetings&style=0.55

Advanced Examples

Minimalist Chart (No Labels, No Legend)

https://makepiechart.com/?data=60,25,15&colors=000000,666666,cccccc&label=none&legend=false

Thin Donut with Custom Start Angle

https://makepiechart.com/?data=40,30,20,10&style=0.7&start=180&label=percent

Sorted Values (Largest First)

https://makepiechart.com/?data=15,45,10,30&labels=Q1,Q2,Q3,Q4&sort=desc

Two-Slice Comparison

https://makepiechart.com/?data=73,27&labels=Yes,No&colors=10b981,ef4444&title=Survey%20Results

Tips & Best Practices