Graphs

Enterprise

Developer

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

Drop a production-ready bar chart into your React app in minutes. Grouped, stacked, or 100% stacked — just your data and a single typed config.

Get started

View docs

playground.graphy.dev

{
  "type": "pie",
  "data": {
    "columns": [
      { "key": "segment", "label": "Segment" },
      { "key": "revenue", "label": "Revenue" }
    ],
    "rows": [
      { "segment": "Enterprise", "revenue": 42000 },
      { "segment": "Mid-market", "revenue": 28000 },
      { "segment": "SMB", "revenue": 19000 },
      { "segment": "Self-serve", "revenue": 11000 }
    ]
  }
}

playground.graphy.dev

{
  "type": "pie",
  "data": {
    "columns": [
      { "key": "segment", "label": "Segment" },
      { "key": "revenue", "label": "Revenue" }
    ],
    "rows": [
      { "segment": "Enterprise", "revenue": 42000 },
      { "segment": "Mid-market", "revenue": 28000 },
      { "segment": "SMB", "revenue": 19000 },
      { "segment": "Self-serve", "revenue": 11000 }
    ]
  }
}

Why this bar chart library

The fiddly parts of a bar 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.

Grouped, stacked, or 100% stacked

Switch variant with one word — type: 'bar', 'barStacked', or 'barStackedFill'. Same data, three different stories.

Grouped, stacked, or 100% stacked

Switch variant with one word — type: 'bar', 'barStacked', or 'barStackedFill'. Same data, three different stories.

Totals & percentages built in

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

Totals & percentages built in

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

chart-donut

Sort bars automatically

Set options.sortBars: true and single-series bars rank highest to lowest — no manual sorting of your rows.

Sort bars automatically

Set options.sortBars: true and single-series bars rank highest to lowest — no manual sorting of your rows.

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, bar 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 bar config

Set type: 'bar', pass your rows, and pick grouped, stacked, or 100% stacked — all fully typed.

const config: GraphConfig = {
  type: 'bar',
  data: { rows: [ … ] },
  options: { sortBars: true },};

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 bar.

Graphy's agents read your dataset, decide grouped, stacked, or 100% stacked, and ship a validated bar chart — deterministic math, not LLM guesswork.

ask mode

Ask for a bar chart. Get a good one.

Describe what you want in plain English — “quarterly revenue by region, stacked” — 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 grouped vs. stacked with scoring rules, and proves the comparison with a clean bar chart.

/ one call — a bar 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: revenueByRegion,
   userPrompt: 'Bar chart of quarterly revenue by region',
 })
 // → validated, themed bar chart — 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 comparing categories side by side.

Quarterly comparison

Compare Q1 vs Q2 revenue by region with side-by-side grouped bars.

Team composition

Stack full-time, part-time, and contract headcount to show totals per department.

Channel mix

Normalize each bar to 100% to show the relative split across channels.

Compare

Side by side with the usual options.

Capability

Graphy

MUI X Charts

Chart.js

Polished bar defaults out of the box

✓

Partial

Grouped, stacked, 100% stacked from one prop

✓

Partial

Percentage labels with one flag

✓

Partial

Sort bars automatically

✓

—

In-place end-user editor mode

✓

—

Single typed config object

✓

—

FAQ

Bar chart questions, answered.

How do I make a bar chart in React?

Install the SDK, define a config object with type: 'bar' 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 bar chart, tooltips, legend, and data labels ship in one package. You pass data in and get a production-ready chart out, rather than assembling primitives yourself.

How do I stack multiple series?

Set type: 'barStacked' with the same columns and rows shape. Each series renders as a segment of one bar, end-to-end, showing both parts and the total.

Can I show percentages instead of raw values?

Yes. Use type: 'barStackedFill' to normalize each bar to 100%, and set dataLabels: { showDataLabels: true, dataLabelFormat: 'percentage' } to label each segment's share.

How do I sort bars by value?

Set options.sortBars: true. It ranks bars from highest to lowest automatically — this only applies to single-series grouped bar charts.

How is this different from MUI X Charts or Chart.js?

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.