Zero dependencies
Pure vanilla JavaScript with no external visualization framework required.
Lightweight by designZero dependencies · Pure JavaScript
Data visualizationwithout the baggage.
Datum is a lightweight, layer-based visualization library for building rich, interactive charts with vanilla JavaScript.
$
npm i @psdpainter/datum-jsInteractive visualization
Built for developers
Everything you need.
Nothing you don't.
Build expressive visualizations with a small, composable API and no external runtime dependencies.
Layer-based composition
Combine lines, areas, bars, dots, rulers and other layers inside a single visualization.
Explore layers →Interactive by default
Crosshairs and tooltips provide coordinated context across composed data layers.
View documentation →Flexible data
Work directly with primitive arrays or map object properties to visualization dimensions.
Data options →Native ES modules
Import only what you need with a modern, straightforward JavaScript API.
Built for modern browsersStatistics included
Common statistical helpers live alongside the visualization API.
Explore statistics →Composable by design
Build charts by composition.
A Datum chart is a collection of independent layers. Add the visual primitives you need and let them share the same coordinate system.
Energy balance · 24 hours · target 605 layers
Reading the layers
A day of shifting energy.
Demand peaks as generation fades. Five layers tell the story on one shared axis.
A blue gradient grounds the chart in hourly demand. Its filled silhouette makes the evening surge easy to spot while leaving the other series visible.
The blue line traces the same 24 readings as the area. Its crisp edge lets you compare demand precisely against generation and the forecast.
The green line shows supply climbing through the day and falling toward evening. Where it crosses demand, the balance shifts from surplus to shortfall.
The purple line adds an expected demand curve. Compare it with actual demand to see where the evening peak exceeds expectations.
A dashed orange ruler stays at 60 across all 24 hours. This shared reference makes it easy to see which series sit above or below the target.
composition.js
// 24 hourly readings per series
Datum.chart({
target: '#chart',
datum: [
Datum.area(demand, {
fill: Color.Blue,
opacity: 0.18,
gradient: true
}),
Datum.line(demand, {
name: 'Demand',
stroke: Color.Blue
}),
Datum.line(generation, {
name: 'Generation',
stroke: Color.Green
}),
Datum.line(forecast, {
name: 'Forecast',
stroke: Color.Purple
}),
Datum.ruler([], {
value: 60,
stroke: Color.Orange,
dashed: true
})
]
});Ready to build?
Start creating with Datum.
Install Datum and create your first visualization in a few lines of JavaScript.