Vue ChartsBox Plot Series

A Box Plot Series, also known as a Box-and-Whisker Plot, visually summarises a dataset's distribution through its median and quartiles.

Simple Box Plot Copy Link

To create a Box Plot Series, use the box-plot series type.

{
    series: [
        {
            type: 'box-plot',
            yName: 'Employee Salaries',
            xKey: 'department',
            minKey: 'min',
            q1Key: 'q1',
            medianKey: 'median',
            q3Key: 'q3',
            maxKey: 'max',
        },
    ],
}

In this configuration:

• yName specifies the tooltip title.
• xKey sets the box plot's category.
• minKey maps to the minimum value.
• q1Key maps to the first quartile (Q1).
• medianKey maps to the median.
• q3Key maps to the third quartile (Q3).
• maxKey maps to the maximum value.

Note the default orientation of a Box Plot is vertical.

Horizontal Box Plot Copy Link

To show a Horizontal Box Plot, set direction: 'horizontal'.

{
    series: [
        {
            type: 'box-plot',
            direction: 'horizontal',
            xKey: 'department',
            // ...
        },
    ],
}

Note that the xKey specifies the category values, regardless of series orientation.

Customisation Copy Link

Box Plot whiskers and caps typically inherit series styles but can be individually customised. Here, the whisker and cap properties are used to customise whisker line styles and cap length.

{
    series: [
        {
            type: 'box-plot',
            // Other series options...
            whisker: {
                stroke: '#098a89',
                strokeWidth: 3,
                lineDash: [2, 1],
            },
            cap: {
                lengthRatio: 0.8, // 80% of bar's width (default is 0.5)
            },
        },
    ],
}

Box Plot With Outliers Copy Link

Box plots are commonly paired with outliers to offer a more comprehensive view of the data. This is easily achieved by combining a Box Plot Series with a Scatter Series, as shown below:

{
    series: [
        {
            data: boxPlotData,
            type: 'box-plot',
            // ...
        },
        {
            data: outliersData,
            type: 'scatter',
            // ...
        },
    ],
}

API Reference Copy Link