React ChartsRange Area Series

ReactAngularVueJavascript

Enterprise

A Range Area Series represents data ranges using a shaded area between high and low data values. This series type is often used to show variations or trends in data over a specified time.

Simple Range Area

The Range Area Series is created using the range-area series type.

series: [
    {
        type: 'range-area',
        xKey: 'date',
        yLowKey: 'flatsAndMaisonettes',
        yHighKey: 'detachedHouses',
    },
],

The yLowKey and yHighKey are used to retrieve the range of values for the Y axis.

Multiple Range Area Series

Multiple Range Area Series can be combined into a single chart.

series: [
    {
        type: 'range-area',
        xKey: 'date',
        yLowKey: 'flatsAndMaisonettes',
        yHighKey: 'terracedHouses',
        xName: 'Date',
        yName: 'Flats & Terraced',
        yLowName: 'Flats & Maisonettes',
        yHighName: 'Terraced',
    },
    {
        type: 'range-area',
        xKey: 'date',
        yLowKey: 'semiDetachedHouses',
        yHighKey: 'detachedHouses',
        xName: 'Date',
        yName: 'Semi-detached & Detached',
        yLowName: 'Semi-detached',
        yHighName: 'Detached',
    },
],

In this configuration:

• yName is used to control the text displayed in the legend.
• yLowName, yHighName and xName are used to control the text displayed in the tooltip.

Missing Data

The series handles missing or invalid data based on the presence or validity of xKey, yLowKey and yHighKey values in the data object.

• Data points with a yLowKey or yHighKey value of positive or negative Infinity, null, undefined or NaN will be rendered as a gap in the range.
• Set connectMissingData: true to draw a connecting area between points either side of a missing section.
• Data points with invalid xKey values will be ignored.

Customisation

Series markers and labels can be enabled using the marker and label options.

series: [
    {
        // ...
        marker: {
            size: 7,
        },
        label: {
            padding: 17,
            formatter: ({ itemId, value }) => {
                return `${itemId === 'low' ? 'L' : 'H'}: ${value.toFixed(0)}`;
            }
        },
    },
],

In this configuration:

• Markers have been enabled using the marker options object.
• The yHighKey and yLowKey values for each data point are presented as labels via the label options.
• The label.formatter function uses the itemId from the params object to distinguish whether the label is a low or high value.

API Reference