Bar

Basic usage

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

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

const values = [
    18,
    26,
    22,
    34,
    31,
    42,
    38
];

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

    datum: [
        Datum.bar(values, {
            fill: Color.Blue,
            rx: 4,
            opacity: 0.9
        })
    ]
});

Syntax

Datum.bar(data, {
    x,
    y,
    fill,
    stroke,
    strokeWidth,
    rx,
    opacity,
    stackId
});

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

Data keys

Bar layers use x and y as their default data-property names. Map different object properties using the corresponding options.

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

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

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

Fill

Use fill to set the bar color. When no fill is supplied, Datum selects a color from its default series palette.

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

Stroke

Bars can optionally have an outline usingstroke and strokeWidth.

Datum.bar(values, {
    fill: Color.LightBlue,
    stroke: Color.Blue,
    strokeWidth: 1
});

Rounded corners

Use rx to control the corner radius of each bar. The default is 2.

Datum.bar(values, {
    fill: Color.Blue,
    rx: 6
});

Opacity

Use opacity to control the transparency of the bars. The default value is 1.

Datum.bar(values, {
    fill: Color.Blue,
    opacity: 0.7
});

Grouped bars

Add multiple bar layers to the same chart to compare multiple series within each category. When multiple bar layers are present without stacking, Datum automatically arranges them side by side.

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

    datum: [
        Datum.bar(actual, {
            fill: Color.Blue
        }),

        Datum.bar(projected, {
            fill: Color.Green
        })
    ]
});

Stacked bars

Give each bar layer a stackId to combine multiple series vertically instead of displaying them side by side.

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

    datum: [
        Datum.bar(product, {
            fill: Color.Blue,
            stackId: 'total'
        }),

        Datum.bar(services, {
            fill: Color.Green,
            stackId: 'total'
        })
    ]
});

When multiple bar layers have a stack identifier, Datum treats them as a stacked bar chart and accumulates their values within each category.

Options

{
    x: 'x',
    y: 'y',
    fill: null,
    stroke: null,
    strokeWidth: 0,
    rx: 2,
    opacity: 1,
    stackId: null
}

Composing with other layers

Bar layers can share a chart with other Datum layers. For example, a ruler can provide a reference value across the bars.

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

    datum: [
        Datum.bar(values, {
            fill: Color.Blue
        }),

        Datum.ruler([], {
            value: 30,
            stroke: Color.Red,
            dashed: true
        })
    ]
});