Quick Start

1. Add a chart container

Start with an element where Datum can render the visualization.

<div id="chart"></div>

2. Define your data

Datum can work directly with an array of primitive numeric values.

const values = [
    12, 18, 14, 24, 20, 28, 25
];

3. Compose the visualization

Pass layers to Datum.chart() using thedatum collection. Here, the same values are represented by both a line and dots.

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

const values = [
    12, 18, 14, 24, 20, 28, 25
];

Datum.chart({
    target: '#quick-start-chart',
    height: 300,

    datum: [
        Datum.line(values, {
            stroke: Color.Blue,
            strokeWidth: 2
        }),

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

How it works

Datum.chart() creates the chart surface. Each item in datum describes a visualization layer rendered within that shared chart.

Because the line and dot layers receive the same values, they share the same coordinate system and appear together as one visualization.