Dot

Basic usage

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

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

const values = [
    { x: 'Mon', y: 14 },
    { x: 'Tue', y: 22 },
    { x: 'Wed', y: 18 },
    { x: 'Thu', y: 30 },
    { x: 'Fri', y: 26 },
    { x: 'Sat', y: 38 },
    { x: 'Sun', y: 34 }
];

Datum.chart({
    target: '#dot-example',
    height: 300,

    datum: [
        Datum.dot(values, {
            x: 'x',
            y: 'y',
            stroke: Color.Blue,
            strokeWidth: 2,
            fill: '#ffffff',
            radius: 6
        })
    ]
});

Syntax

Datum.dot(data, {
    x,
    y,
    radius,
    fill,
    stroke,
    strokeWidth,
    name,
    tooltip
});

Datum.dot() creates a layer definition that can be included in the datum array passed toDatum.chart().

Data keys

Dot layers use x and y as their default data-property names. Use the corresponding options when your data objects use different property names.

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

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

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

Radius

Use radius to control the size of each dot. The default radius is 4.

Datum.dot(values, {
    radius: 6
});

Fill

Use fill to control the interior color of each dot. The default fill is white.

Datum.dot(values, {
    fill: Color.Blue
});

A white fill can be useful when dots are composed over a line or area because the points remain visually distinct.

Stroke

Use stroke and strokeWidth to control the outline of each dot. When no stroke color is supplied, Datum selects a color from its default series palette.

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

Series name

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

Datum.dot(values, {
    name: 'Observations',
    stroke: Color.Blue
});

Tooltips

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

Set tooltip to false to exclude the layer from tooltip interaction.

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

Options

{
    x: 'x',
    y: 'y',
    radius: 4,
    fill: '#ffffff',
    stroke: null,
    strokeWidth: 2,
    name: undefined,
    tooltip: undefined
}

Composing with a line

Dot layers are commonly placed above a line layer to make each individual observation visible. Because Datum renders layers in array order, place the dots after the line.

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

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

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