Vue ChartsRange Bar Series

A Range Bar Series uses vertical or horizontal bars to show the range between high and low values in data. This series type is commonly used to assess data stability or variability.

Simple Range Bar

The Range Bar Series is created using the range-bar series type.

series: [
    {
        type: 'range-bar',
        xKey: 'department',
        yLowKey: 'low',
        yHighKey: 'high',
    },
],

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

Multiple Range Bar Series

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

series: [
    {
        type: 'range-bar',
        xKey: 'date',
        yLowKey: 'start',
        yHighKey: 'gain',
        xName: 'Month',
        yLowName: 'Start',
        yHighName: 'End',
        yName: 'Gained',
    },
    {
        type: 'range-bar',
        xKey: 'date',
        yLowKey: 'loss',
        yHighKey: 'gain',
        xName: 'Month',
        yLowName: 'End',
        yHighName: 'Start',
        yName: 'Lost',
    },
],

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.

When the axes types are continuous ('number', 'time' or 'log'), the yLowKey, yHighKey and xKey values in the data object are considered invalid if they are:

• +/-Infinity
• null
• undefined
• NaN

Customisation

Labels

Series labels can be enabled using the label options.

series: [
    {
        // ...
        label: {
            padding: 10,
            formatter: ({ itemId, value }) => {
                return `£${value.toFixed(0)}K ${itemId === 'low' ? '↓' : '↑'}`;
            },
        },
    },
],

In this configuration:

• 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.

Corner Radius

The corner radius can be customised with the cornerRadius property.

series: [
    {
        // ...
        cornerRadius: 10,
    },
],

Horizontal Range Bar

To create a Horizontal Range Bar Series, set direction: 'horizontal'.

series: [
    {
        type: 'range-bar',
        direction: 'horizontal',
        xKey: 'department',
        yLowKey: 'low',
        yHighKey: 'high',
    },
],

When the direction is 'horizontal' the xKey will determine categories on the y-axis, while the yLowKey and yHighKey will be used to provide numerical values along the x-axis.

API Reference