Introduction

Datum is a lightweight JavaScript library for building composable data visualizations without bringing a large framework or dependency tree into your application.

Build with layers

A Datum chart can combine multiple visualization layers over the same data. An area, line and collection of dots, for example, can work together as a single visualization.

Layer composition

An area, line and dot layer rendered over the same values.

JavaScript

import { Datum, Color } from '@psdpainter/datum-js';

const values = [
    14, 8, 24, 7, 10, 18,
    15, 2, 6, 16, 18, 28
];

Datum.chart({
    target: '#getting-started-chart',
    height: 300,

    datum: [
        Datum.area(values, {
            fill: Color.LightGreen,
            opacity: 0.3
        }),

        Datum.line(values, {
            stroke: Color.Green,
            strokeWidth: 2
        }),

        Datum.dot(values, {
            stroke: Color.Green,
            fill: '#ffffff',
            radius: 4
        })
    ]
});

Install Datum

npm install @psdpainter/datum-js