React ChartsRange Area Series

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 Copy Link

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 Copy Link

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 Copy Link

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 Copy Link

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.

Inverted Style Copy Link

The invertedStyle property allows specifying a fill for areas where the yHighKey line is below the yLowKey line.

{
    series: [
        {
            type: 'range-area',
            xKey: 'quarter',
            yLowKey: 'projected',
            yHighKey: 'actual',
            invertedStyle: {
                fill: 'red',
            },
        },
    ],
}

In this configuration:

• The series fill of blue is used where high > low.
• The invertedStyle.fill of red is used where high < low.
• The invertedStyle object supports fill and fillOpacity.

High and Low Styling Copy Link

By default, the Line and Marker styling options are applied to both the high and low values of the data.

Use the item.high and item.low properties to apply specific overrides.

{
    series: [
        {
            // ...

            // Shared high/low styling options:
            strokeWidth: 2,
            marker: {
                size: 12,
                fill: '#cccccc',
                itemStyler: (params) => {
                    // Highlight datum styling options:
                    if (params.highlightState === 'highlighted-item') {
                        if (params.itemId === 'high') {
                            return { fill: '#53c653' };
                        }
                        if (params.itemId === 'low') {
                            return { fill: '#ff3333' };
                        }
                    }
                    return {};
                },
            },

            // Differentiated high/low styling options
            item: {
                high: {
                    stroke: '#39ac39',
                    marker: {
                        stroke: '#39ac39',
                    },
                },
                low: {
                    stroke: '#e60000',
                    marker: {
                        stroke: '#e60000',
                    },
                },
            },
        },
    ],
}

In this configuration:

• The strokeWidth is set to 2 on all lines.
• All Markers are set a size of 12 with a gray fill.
• The stroke for high line is set to a greenish colour.
• The stroke for low Line is set to a reddish colour.
• An itemStyler is used to override the fill of highlighted Markers, using different fill values for the high and low Markers.

API Reference Copy Link