Skip to main content

The Box Plot Series Type

A box plot (also called a box-and-whisker plot) is a statistical visualization that displays the distribution of a dataset through five key statistical measures. It's one of the most effective ways to show data distribution, identify outliers, and compare multiple datasets. The Box Plot Series Type is a powerful visualization tool that displays the distribution of data based on a five-number summary: minimum, first quartile (Q1), median (Q2), third quartile (Q3), and maximum. It is particularly useful for identifying outliers and understanding the spread of data.

Key Configuration Options​

Data Point Width Modes​

Sets the mode which determines how dataPointWidth is interpreted. Available values are EDataPointWidthMode📘. Default is Relative.

  • EDataPointWidthMode.Relative: Interprets Data Point Width as a relative to the full width which is axis length / number of columns. This assumes that there are no gaps in the data. If you are plotting sparse columns on a NumericAxis, consider Range mode
  • EDataPointWidthMode.Absolute: Interprets Data Point Width as an absolute pixel value
  • EDataPointWidthMode.Range: Interprets Data Point Width as the x data range per column. This is useful if you are plotting sparse columns on a NumericAxis

Styling Components​

  • Main Box: Defined by stroke, fill, opacity, and strokeThickness
  • Whiskers: Vertical lines extending from box to min/max values
  • Caps: Horizontal lines at whisker ends
  • Median Line: Horizontal line inside the box

Create a Box Plot Chart​

To create a Box Plot Chart with SciChart.js we need to use FastBoxPlotRenderableSeries📘 and BoxPlotDataSeries📘. Start with the following code:

// Demonstrates how to create a box plot chart with SciChart.js

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
});

const isVertical = true;
const isXCategoryAxis = false;

const configCategoryAxis: ICategoryAxisOptions = {
    labelFormat: ENumericFormat.Decimal,
    labelPrecision: 0,
    cursorLabelFormat: ENumericFormat.Decimal,
    cursorLabelPrecision: 0
};

const configX = {
    axisAlignment: isVertical ? EAxisAlignment.Bottom : EAxisAlignment.Left,
    growBy: new NumberRange(0.05, 0.05),
    autoRange: EAutoRange.Once,
    flippedCoordinates: false
};

sciChartSurface.xAxes.add(
    isXCategoryAxis
        ? new CategoryAxis(wasmContext, { ...configX, ...configCategoryAxis })
        : new NumericAxis(wasmContext, configX)
);

sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        axisAlignment: isVertical ? EAxisAlignment.Left : EAxisAlignment.Bottom,
        growBy: new NumberRange(0.05, 0.05),
        autoRange: EAutoRange.Once,
        flippedCoordinates: !isVertical
    })
);

const xValues = [4, 5, 6];
const minimumValues = [0, 1, 0.5];
const maximumValues = [10, 9, 9.5];
const medianValues = [4.5, 5.5, 5];
const lowerQuartileValues = [3, 4, 3.5];
const upperQuartileValues = [7, 6, 6.5];

const boxPlotDataSeries = new BoxPlotDataSeries(wasmContext, {
    xValues,
    minimumValues,
    maximumValues,
    medianValues,
    lowerQuartileValues,
    upperQuartileValues
});

const boxSeries = new FastBoxPlotRenderableSeries(wasmContext, {
    dataSeries: boxPlotDataSeries,
    stroke: "black",
    strokeThickness: 1,
    dataPointWidthMode: EDataPointWidthMode.Relative,
    dataPointWidth: 0.5,
    fill: "green",
    opacity: 0.6,
    whiskers: {
        stroke: "green",
        strokeThickness: 2
    },
    cap: {
        stroke: "green",
        strokeThickness: 2,
        dataPointWidth: 0.3
    },
    medianLine: {
        stroke: "black",
        strokeThickness: 2
    }
});
sciChartSurface.renderableSeries.add(boxSeries);

This results in the following output:

Box Plot Complex Example​

tip

The JavaScript Box Plot Chart Example can be found in the SciChart.Js Examples Suite > Box Plot Series on Github, or our live demo at scichart.com/demo.

Above: The JavaScript Box Plot Series Chart example from the SciChart.js Demo