Range

Basic usage

Pass an array of objects to Datum.range()and identify the properties containing the lower and upper values.

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

const values = Array.from(
    { length: 12 },
    (_, index) => {
        const average = 60 + Math.sin(index / 2) * 12;
        const spread = 8 + Math.random() * 8;

        return {
            month: index + 1,
            low: Math.round(average - spread),
            high: Math.round(average + spread)
        };
    }
);

Datum.chart({
    target: '#range-example',
    height: 320,
    datum: [
        Datum.range(values, {
            x: 'month',
            yMin: 'low',
            yMax: 'high',
            fill: Color.Blue,
            opacity: 0.25
        })
    ]
});

Syntax

Datum.range(data, {
    x,
    yMin,
    yMax,
    fill,
    opacity,
    stroke,
    strokeWidth
});

Data

By default, Datum expects each data point to containx, yMin, and yMaxproperties.

const values = [
    { x: 1, yMin: 42, yMax: 68 },
    { x: 2, yMin: 48, yMax: 74 },
    { x: 3, yMin: 51, yMax: 79 },
    { x: 4, yMin: 46, yMax: 72 }
];

Datum.range(values);

Data keys

Use x, yMin, andyMax to map custom property names.

const values = [
    { month: 1, low: 42, high: 68 },
    { month: 2, low: 48, high: 74 },
    { month: 3, low: 51, high: 79 }
];

Datum.range(values, {
    x: 'month',
    yMin: 'low',
    yMax: 'high'
});

Tuple data

Range layers also accept arrays containing the minimum and maximum value for each point.

const values = [
    [42, 68],
    [48, 74],
    [51, 79],
    [46, 72]
];

Datum.range(values);

Datum automatically assigns sequential X positions beginning with 1.

Fill

Use fill to control the color of the range area.

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

When no fill is provided, Datum uses the default series color for the layer.

Opacity

Use opacity to control the transparency of the range.

Datum.range(values, {
    fill: Color.Blue,
    opacity: 0.25
});

The default opacity is 0.25.

Stroke

A border can be drawn around the range usingstroke and strokeWidth.

Datum.range(values, {
    fill: Color.Blue,
    opacity: 0.25,
    stroke: Color.Blue,
    strokeWidth: 2
});

By default, range layers do not render a stroke.

Options

{
    x: 'x',
    yMin: 'yMin',
    yMax: 'yMax',
    fill: undefined,
    opacity: 0.25,
    stroke: null,
    strokeWidth: 0
}