Line

Basic usage

Create a line layer with Datum.line(). Pass the data as the first argument and line options as the second.

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

// const values = [
//     12,
//     20,
//     16,
//     28,
//     24,
//     36,
//     32
// ];
const values = [
    { month: 'Jan', value: 20 },
    { month: 'Feb', value: 22 },
    { month: 'Mar', value: 85 },
    { month: 'Apr', value: 24 },
    { month: 'May', value: 26 },
    { month: 'Jun', value: 90 },
    { month: 'Jul', value: 28 },
    { month: 'Aug', value: 30 }
];

Datum.chart({
    target: '#line-example',
    width: '100%',
    height: 300,

    datum: [
        Datum.line(values, {
            name: 'Sessions',
            x: 'month',
            y: 'value',
            stroke: Color.Blue,
            strokeWidth: 3,
            smooth: true
        })
    ]
});

Syntax

Datum.line(data, {
    x,
    y,
    stroke,
    strokeWidth,
    smooth,
    tension,
    name,
    tooltip
});

Datum.line() creates a layer definition. Pass that layer to the datum array ofDatum.chart() to render it.

Data keys

Line layers use x and y as their default data-property names. Use the corresponding options to map other object properties.

const sales = [
    { month: 'Jan', revenue: 18 },
    { month: 'Feb', revenue: 26 },
    { month: 'Mar', revenue: 22 }
];

Datum.line(sales, {
    x: 'month',
    y: 'revenue'
});

Numeric arrays can also be passed directly. Datum assigns sequential X categories beginning at 1.

Stroke

Use stroke to set the line color andstrokeWidth to control its thickness.

Datum.line(values, {
    stroke: Color.Blue,
    strokeWidth: 3
});

When stroke is not supplied, Datum selects a color from its default series palette.

Smoothing

Lines use straight segments by default. Setsmooth to true to render a smooth cubic Bézier path between points.

Datum.line(values, {
    smooth: true
});

Tension

The tension option controls the shape of a smoothed line. Its default value is 0.2.

Datum.line(values, {
    smooth: true,
    tension: 0.2
});

Tension only affects the line when smooth is enabled.

Series name

Use name to give the line a meaningful series label. Datum uses this value when displaying the layer in the chart legend.

Datum.line(values, {
    name: 'Sessions',
    stroke: Color.Blue
});

Legend items are interactive. Selecting an item toggles the visibility of its corresponding layer.

Tooltips

Line layers participate in the chart's shared tooltip and crosshair interaction by default.

Set tooltip to false on the layer to exclude it from layer-level tooltip interaction.

Datum.line(values, {
    tooltip: false
});

Options

{
    x: 'x',
    y: 'y',
    stroke: null,
    strokeWidth: 2,
    smooth: false,
    tension: 0.2,
    name: undefined,
    tooltip: undefined
}

Composing with other layers

A line is often combined with area and dot layers to add context or emphasize individual observations.

Datum.chart({
    target: '#chart',

    datum: [
        Datum.area(values, {
            fill: Color.LightBlue,
            opacity: 0.2
        }),

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

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