Graphs

Enterprise

Developer platform

The React pie chart you don't have to fight.

Drop a production-ready pie chart into your React app in minutes. No SVG math, no label collisions, no styling rabbit holes, just your data and a single typed config.

Get started

View docs

Why this pie chart library

The fiddly parts of a pie chart, already handled.

Zero-to-chart in minutes

Pass a config object, render two components. Sensible pie defaults for spacing, colors, and labels are picked for you.

Zero-to-chart in minutes

Pass a config object, render two components. Sensible pie defaults for spacing, colors, and labels are picked for you.

Labels & percentages built in

Flip on showDataLabels and dataLabelFormat: 'percentage'. No manual math, no label-collision wrangling.

Labels & percentages built in

Flip on showDataLabels and dataLabelFormat: 'percentage'. No manual math, no label-collision wrangling.

Pie or donut, one prop

Switch between a full pie and a donut with a single value change. Same data, same config, instant restyle.

Pie or donut, one prop

Switch between a full pie and a donut with a single value change. Same data, same config, instant restyle.

chart-donut

User-editable charts

Set mode="editor" and your users can retitle slices and annotate the chart in-place. Built in, not bolted on.

User-editable charts

Set mode="editor" and your users can retitle slices and annotate the chart in-place. Built in, not bolted on.

TypeScript-first

Every prop and slice option is fully typed. Autocomplete guides you through data, labels, and colors in your IDE.

TypeScript-first

Every prop and slice option is fully typed. Autocomplete guides you through data, labels, and colors in your IDE.

Fine-grained control

Override slice colors, label format, tooltips, and ordering whenever you need to. Defaults that get out of your way.

Fine-grained control

Override slice colors, label format, tooltips, and ordering whenever you need to. Defaults that get out of your way.

How it works

Data in, pie chart out in three steps.

step 1

Install the SDK

One command, private npm package, TypeScript-first. Works with npm, yarn, pnpm, and bun.

npm install @graphysdk/core

step 2

Define your config

Pass your data, chart type, and any customizations as a single typed GraphConfig object. Fully autocompleted in your IDE.

const config: GraphConfig = {
  type: 'pie',
  data: { rows: [ … ] },
  dataLabels: { dataLabelFormat: 'percentage' },};

step 3

Render anywhere in your tree

Wrap in GraphProvider and drop in the Graph component. That's it.

<GraphProvider config={config}>
  <Graph /></GraphProvider>

Agents

Don't want to write the config? Let an agent build the pie.

Graphy's agents read your dataset, find the part-to-whole story, and ship a validated pie chart — deterministic math, not LLM guesswork.

ask mode

Ask for a pie chart. Get a good one.

Describe what you want in plain English — “browser share as a pie with percentages” — and the agent returns a typed, themed GraphConfig ready to render.

explore mode

Drop in your data. Get the chart.

Hand the agent a raw dataset and it finds what matters, picks the chart type with scoring rules, and proves the breakdown with a clean pie.

 // one call — a pie chart your user can read
 import { GraphyAiSdk } from '@graphysdk/agents-sdk'
 import { GraphProvider, Graph } from '@graphysdk/core'
 
 const ai = new GraphyAiSdk({ apiKey })
 const { config } = await ai.generateGraph({
   data: browserStats,
   userPrompt: 'Pie chart of browser share with % labels',
 })
 // → validated, themed pie — ready to ship
 <GraphProvider config={config}><Graph /></GraphProvider>

Math runs in the engine, not the model

Right chart type by scoring rules

Validated before you see it

Your raw data stays private

Explore the agents

Visit playground

Use cases

Great for showing how a whole breaks down.

Market share

Show how a category splits across competitors in a single, instantly readable circle.

Budget breakdown

Turn a spreadsheet of line items into a clean part-to-whole view for finance and ops.

Traffic sources

Break down where visitors come from with percentage labels your team actually reads.

FAQ

Pie chart questions, answered.

How do I make a pie chart in React?

Install the SDK, define a config object with type: 'pie' and your data rows, then render <GraphProvider config={config}><Graph /></GraphProvider>. The chart, labels, and legend are handled for you — no manual SVG or canvas work.

Do I need a separate charting library?

No. The pie chart, tooltips, legend, and percentage labels ship in one package. You pass data in and get a production-ready chart out, rather than assembling primitives yourself.

Can I show percentages on the slices?

Yes. Set dataLabels: { showDataLabels: true, dataLabelFormat: 'percentage' } in your config and each slice renders its share automatically, with collision handling built in.

How do I turn a pie chart into a donut?

Switch the chart variant — the same data and config render as a donut with a hollow center. No data restructuring required, so you can A/B the two looks freely.

How is this different from MUI X Charts or react-google-charts?

Those are capable libraries, but you own most visual decisions and wiring. This is a config-first chart API: polished defaults, an optional end-user editor, and fine-grained overrides only when you want them.