Graphs

Enterprise

Developer

Every chart your React app needs. One effortless charting library.

Bar, line, pie, funnel, heatmap, and more. Pick a type, pass your data, done.

Get started

View docs

CONFIGURATION

Data in, chart out — in three steps.

One config object drives every chart type: type, data, options, axes — fully typed, autocompleted in your editor.

step 1

Install the SDK

One package gives you every chart type and the provider that wires them up.

npm install @graphysdk/core

step 2

Define your config

Set type and pass your data — Graphy fills in sensible defaults for anything you leave out.

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

step 3

Render anywhere

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

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

Why Graphy

Make every chart look like yours.

Axes, formatting, copy, and interactivity are all part of the same config — no CSS overrides, no wrapper divs.

Axes & scales

Set min/max, custom labels, and tick formatting per axis, on any cartesian chart.

Number formatting

Abbreviate large numbers, control decimals, and format currency — all built in.

Number formatting

Abbreviate large numbers, control decimals, and format currency — all built in.

Titles & sources

Add context directly in the config: title, subtitle, and a linked data source.

Titles & sources

Add context directly in the config: title, subtitle, and a linked data source.

Editable in place

Set mode="editor" and let users rename labels and annotate, built in, not bolted on.

Agents

Give an agent your data. Get a validated chart.

Pair Graphy with the agents SDK to pick the right chart type and shape the config — deterministic math, not guesswork.

Natural language

Describe the change

"Change this to a line chart and add a trend line" — the agent edits your existing GraphConfig for you.

TYPED RESPONSES

Config, plus a plain summary

Every call returns an updated GraphConfig alongside a plain-English note on what changed.

LIVE UPDATES

Controlled, real-time data

Pair onChange with your own state to stream new data in without a re-mount.

// edit an existing chart with a plain-English prompt
import { GraphyAiSdk } from '@graphysdk/agents-sdk';
const ai = new GraphyAiSdk({ apiKey });
const result = await ai.generateGraph({
  config,
  userPrompt: 'Change this to a line chart and add a trend line',
});
result.config // updated GraphConfig
result.response.message // "Changed chart type to line…"

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

Built for dashboards, reports, and everything between.

FAQ

Questions, answered.

Is React good for data visualization?

Yes, React is well suited to data visualization. Its component model re-renders a chart automatically whenever the underlying data changes, so you get the same state-driven workflow you already use for the rest of your UI — no manual DOM or canvas updates required.

How to build charts in React?

To build a chart in React, in three steps: (1) install the charting library Graphy — npm install @graphysdk/core; (2) shape your data into rows and columns, and describe the chart in a single config object; (3) render the config with the library's components.

Which chart library is best for React?

We're shipping new chart types regularly. If you need something specific, open a feature request in our GitHub — most of our roadmap is community-driven. Graphy's components are also composable, so you can combine them with standard SVG or Canvas elements for highly custom needs.