Developer Runs locally Ready to use Built-in examples No tracking

Pie Chart Maker

Type "label,value" per row to draw a pie chart with legend and share table; the largest share is highlighted.

A pie chart shows shares of a whole, so it only means something when the parts add up to the total: revenue by source, traffic by channel, budget allocation. If the data are different kinds of measure — sales beside profit, say — or if a trend is what matters, a bar or line chart is the better choice.

One common misreading: the angles are assigned in proportion to each value's share of the sum, so the shares always total 100%, and with two decimals a 99.99% or 100.01% can appear, which is rounding rather than an error. And the number of categories is best kept small — beyond seven or eight the small wedges are barely distinguishable, and merging the tail into an "other" slice reads better.

—
—
—

How to use

  1. Paste rows of label,value that add up to a whole.
  2. Read the chart, the legend and the share table.
  3. Check the largest share, which is highlighted.
  4. Merge small slices into an other category if there are too many.

How it works

How to enter the data

One record per line in category,value format, up to 50 lines; values-only rows get categories numbered 1, 2, 3... automatically.

How slices are arranged

Slices start at 12 o'clock and proceed clockwise in input order, angle = value / total x 360; each slice cycles through a fixed 8-color palette, with a synchronized legend.

How shares are computed

Share = value / total x 100, kept to two decimals; the stat card highlights the largest category, and the detail table lists every value with its share.

Code example

JavaScript Drawing a pie chart with ECharts 

const chart = echarts.init(document.getElementById('chart'));

chart.setOption({
  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
  legend: { bottom: 0 },
  series: [{
    type: 'pie',
    radius: '62%',
    startAngle: 90, // start at 12 o'clock
    data: [
      { value: 1048, name: 'Direct' },
      { value: 735, name: 'Search engines' },
      { value: 580, name: 'Email campaigns' },
    ],
  }],
});

Shell Checking the shares before drawing 

# Sum (to check the denominator of the shares)
awk -F, 'NR>1{s+=$2} END{printf "total %d\n", s}' data.csv

# Sort descending to decide which small slices to merge into "Other"
sort -t, -k2 -nr data.csv | head -8

# Note: the shares should add up to 100% — a gap means missing or duplicated data

FAQ

Are negatives or all-zero data supported?

Neither. Shares are meaningless for negatives, and a zero total cannot be divided into slices — each case gets its own notice. Use a bar or line chart for such data.

Can slice order and colors change?

Order follows input rows clockwise from 12 o'clock; colors cycle through a fixed 8-color palette (blue/green/yellow/red/purple/cyan/pink/orange) — rearrange rows to reassign colors.

The shares don't add up to 100% — why?

Each share is rounded independently to two decimals, so totals can read 99.99% or 100.01% — normal rounding, not an error.

Pie or bar — how to choose?

Pies show composition (parts of a whole); bars compare magnitudes, handle negatives and stay readable past 6 categories.

Is pie data sent to a server?

No. Parsing and drawing happen entirely locally in the browser — it works offline.

How do I put the chart into a report?

Screenshot the canvas; it draws at 640x360 with the legend below, so frame both together for a complete capture.

How many categories at most?

50, but past 6-8 the slices get too thin to read — merge small categories into an Other bucket first.