Data-driven JavaScript chart library
One data format for every chart. Data is decoupled from rendering — switch how the same data is visualized at any time. Built for dashboards.
In OrbCharts, every chart reads the same data format — a plain array of objects. You don't reshape your data one way for a bar chart and another way for a pie chart. Define your data once and declare field mappings with Encoding. The data layer stays clean and simple: what you maintain is the data itself, not a chart-specific format.
In OrbCharts, the visual presentation is a swappable layer. Show the same data as a bar chart today and switch to a line or pie chart tomorrow — only the chart declaration changes, while your data and fetching logic stay untouched. Visual decisions can be made later and changed at any time. Once the data is ready, the only question left is how you want to look at it.
Dashboard requirements never stop changing: try a different chart for this metric, add a trend line to that panel. OrbCharts' composable design lets layers be plugged in and toggled at runtime, and combined with a unified data format, the cost of adding or adjusting a chart is minimal. The data pipeline stays stable while the presentation evolves freely — exactly the developer experience dashboard products need.
The chart below is rendered live by OrbCharts: the same 5 records stay untouched for 5 chart types — only the Plugin declaration changes. Network Bubble and TreeMap describe relationships, not just values, so they append a handful of extra records to the same data.
const data = [
{ id: 'mobile', name: 'Mobile', series: 'Personal', category: 'Mobile', parent: 'Personal', value: 45, x: 3.2, y: 2.1, z: 45 },
{ id: 'wearable', name: 'Wearable', series: 'Personal', category: 'Wearable', parent: 'Personal', value: 6, x: 1.5, y: 0.8, z: 6 },
{ id: 'desktop', name: 'Desktop', series: 'Shared', category: 'Desktop', parent: 'Shared', value: 28, x: 6.5, y: 4.8, z: 28 },
{ id: 'tablet', name: 'Tablet', series: 'Shared', category: 'Tablet', parent: 'Shared', value: 17, x: 5.1, y: 3.4, z: 17 },
{ id: 'tv', name: 'TV', series: 'Shared', category: 'TV', parent: 'Shared', value: 10, x: 8, y: 1.2, z: 10 },
]const chart = new OrbCharts(el, { data })
chart.setPlugins([
new GridPlot({ Bar: {}, CategoryAxis: {}, ValueAxis: {} }),
new Tooltip(),
new Legend(),
])Install the packages and draw your first chart in minutes.
npm i orbcharts