Box Plot SVG Graph

This is a simple Zero dependency implementation that generates a Box and Whisker plot based on the provided data summary and rendering it in a simple interactive SVG image that can be embedded into applications, website, documents, or whatever else your need may be.

For best results the values are placed dynamically based on the data summary values, this requires javascript to be run in order to place and ensure there is no overlapping, if this does not work for your use case you can turn this off with the staticLabels option

Examples

Below are a few SVG box plots that were generated from test.spec.js to refer to generation sample code

Quick Start

Simply add this package using npm or yarn

npm i @cplacke/box-plot-svg

yarn add @cplacke/box-plot-svg

Then you can generate an SVG string with by importing and using the createBoxPlotSVG function and passing the required box-plot data and config overrides if desired

const svg: string = createBoxPlotSVG({
    min: 10,
    max: 100.00,
    q3: 99,
    q1: 11,
    median: 50,
});

If the event functions do run as expected, or images are dynamically added then you may need to invoke this in code after the image has been rendered and size has been determined by using the exported functions as in the below example

const plotId = getId(svgString);
positionLabels(plotId, plotConfig);

Config Object

The default config for generating a box plot are below and can be modified to fit your needs, all units are in percent of total image

const defaultConfig = {
    padding: 2.5, // percentage
    boxWidth: 12.5, // percentage
    boxInset: 2, // percentage
    style: 'height: 100%;', // css rule(s)
    text: {
        size: 12, // pixels
        padding: 1, // pixels
        radius: 2,
        font: 'OptumSans, helvetica, sans-serif, monospace',
    },
    stroke: {
        box: 1.5,
        line: 1.5
    },
    color: {
        fill: '#ECF2F9',
        line: '#1965AE',
        border: '#B4C9E7',
        label: '#1965AE',
        fillHover: '#D7E5F6',
        lineHover: '#B4C9E7',
        text: '#282A2E',
    },
    inverted: true, // when true max renders at top
    staticLabels: false, // no dynamic positioning based on values or script run
}

Limitations

Currently there is no support for passing a direct array of data for quartiles to be calculated at runtime, this is a future enhancement if you would like to help make this project better. There is no support for outlier rendering as points beyond the min/max. The dynamic posistion of the labels happens at document load time with a script implementation, due to the mix of % units for spacing and px units for text sizing.