Make a chart. Keep the source.
Edit local JSON, preview a chart, and download an SVG. Your data stays in this browser.
Chart data
Example ready.
Preview
From JSON to an editable SVG
Try a chart with gains, shortfalls and a zero value. The numbers below are illustrative.
- Replace the editor’s JSON with this example. Keep values as numbers, without quotes.
- Select Render chart. Negative and positive bars share a zero baseline; a zero gets its own marker.
- Select Download SVG. Open the file in a vector editor to adjust its text and shapes. Keep your JSON to regenerate the chart later.
Choose a line or scatter example above for a different chart. Missing values are rejected; use 0 only when zero is the real value.
{
"type": "bar",
"title": "Changes in project hours",
"axisLabel": "Change (hours)",
"footer": "Illustrative data only.",
"bars": [
{"label": "Design", "value": 8},
{"label": "Testing", "value": -3},
{"label": "Maintenance", "value": 0}
]
}Generate charts from your own code
The browser editor, SVG downloads and renderer are free. The 5 USDC developer bundle packages a local Node.js CLI, five editable examples, documentation, source and tests under the MIT License.
Use the CLI to generate files locally, or import renderChart into your app. Node.js 20+ runs the CLI without installing packages. Save to a new output path; existing files are never overwritten.
node cli.mjs examples/01-diverging-bars.json my-chart.svg