Charting SDK
Add charts and data storytelling to your React app
Ship beautiful, interactive charts with editing and annotations built in. Give users more ways to tell their data stories, without building the whole charting experience yourself.
Thursday brings the most organic sign-ups
Sign-ups by weekday and channel
A charting engine built for people and AI
Power AI-generated charts and hands-on editing with the same flexible building blocks. Graphy handles calculations, layout and chart validation, so you can give users more control without building the charting logic yourself.
Beautiful off-the-shelf charts.
The library runs everything from bar charts to globes, treemaps and sankeys, and it is growing. Each example below is rendered by the engine, in the default theme, with nothing styled by hand. Hover to interact.
Where the beans come from
Green coffee bought this year, tonnes by origin
Six in ten trials convert
Sign-ups by channel, poured through the trial
Friday is sign-up day
Sign-ups by weekday and channel
Built to be edited.
It's much more than a chart renderer. Let users create and refine charts directly, through your own controls or with Al-driven commands. Every change shares the same undo-and-redo history.
Customers grew 76% over eleven months
Customers by month, existing and new
New · Jul 2024
Colour
Point and click, or just say it.
Users can click any part of a chart to access the controls that belong to it, or describe the edit in a sentence and let the agent make it. Colours, annotations, highlighting are all customizable.
Every change is a command.
Edits from the UI, from a prompt and from your own controls all go through the same validated commands, so undo and redo come for free and the source data is never touched.
Styled to match your product.
Make charts feel at home in your app with pre-built themes and detailed control over their appearance.
Pre-built chart themes
Choose from our off-the-shelf themes that bring together colours, typography and chart styling, so you can give the charts in your product a consistent look without designing every detail from scratch.
Styling API
Control fonts, colours, spacing and shapes. Fine-tune individual elements and reuse styles across your charts.
styles({ defaults: [ style.graph({ fontFamily: 'Inter', padding: 24, }), style.geom.bar({ fill: '#B84737', cornerRadius: 6, }), style.gridLine({ stroke: '#E0D8C7', dashArray: [2, 4], }), ], })
Add a storytelling layer
The dashboards, presentations and reports your users build need to tell a story. Graphy provides all the tools to make data stories engaging and easy to understand.
Annotations
Add context with notes and arrows that stay attached to the data as your chart changes.
Highlights
Focus attention on the values that matter, with rule-based highlights that update as the data changes.
Reference lines
Put values in context with targets, thresholds and automatically calculated averages.
“After 2+ years building charts in-house, we switched to Graphy's SDK and Agents and never looked back. It’s the best library for editable graphs; polished, opinionated in the right ways, and gives users the tools to tell a clear story, not just display numbers.”
Ready for production
We've baked in all the details that make for a robust, developer-friendly deployment.
Extend
Your interface. Graphy underneath. Build your own visualizations and plugins on top of our charting engine to create truly unique charting experiences.
GET STARTED
Set up Graphy Agents in your project
Get your first AI-generated chart modification working in 5 minutes.