BoxPlot

live example

Explore the API in the live example.

api reference

BoxPlot(name[, parent])

The box plot widget. As a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

BottomAxis
ElementTooltip The default entries shown in the tooltip are: median, q1, q3, lower whisker (as low), upper whisker (as high), number of mild outliers, number of extreme outliers.
Highlight Boxes can be highlighted by passing their names as specified in the data array.
Horizontal
LeftAxis
LineWidth
Objects
Opacity

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

BoxPlot.boxWidth([width])

Sets the box width in pixels.

Parameters

Name	Type	Description
width	number	optionalWidth of the box in pixels. Default value is `20`.

Returns

Object

Reference to the BoxPlot's API.

Examples

// Set box width to 20px.
const box = dalian.BoxPlot('my-chart')
  .boxWidth(20)
  .render()

// Reset box width to default.
box.boxWidth()
  .render()

BoxPlot.data(plots)

Set/updates the data that is shown in the box plot. Each box is a plot group in itself, so all methods that operate on plot groups are applied on the box level.

Parameters

Name Type Description

plots

Object[]

Name	Type	Description
plots	Object[]	Array of objects representing the boxes to show. Each box has two properties: name `string` Category name. value `Object` Category value. The `value` property is an object with the following structure: median `number` The sample median. q1 `number` Lower quantile of the sample. q3 `number` Upper quantile of the sample. whiskers `Object` Object containing two numbers: the `lower` and `upper` whiskers. Meaning of these values can vary. outliers `Object` Object containing two arrays of numbers: the list of `mild` and `extreme` outliers

Array of objects representing the boxes to show. Each box has two properties:

name: string Category name.
value: Object Category value.

The value property is an object with the following structure:

median: number The sample median.
q1: number Lower quantile of the sample.
q3: number Upper quantile of the sample.
whiskers: Object Object containing two numbers: the lower and upper whiskers. Meaning of these values can vary.
outliers: Object Object containing two arrays of numbers: the list of mild and extreme outliers

Returns

BoxPlot

Reference to the BoxPlot API.

Examples

const box = dalian.BoxPlot('my-chart')
  .data([{
    name: 'box 1',
    value: {
      median: 4.5,
      q1: 3.2,
      q3: 6.5,
      whiskers: {
        lower: 2.2,
        upper: 7.6
      },
      outliers: {
        mild: [],
        extreme: [9.2, 10.2]
      }
    }
  }, {
    name: 'box 1',
    value: {
      median: 5.4,
      q1: 4.5,
      q3: 7.4,
      whiskers: {
        lower: 3.4,
        upper: 8.7
      },
      outliers: {
        mild: [3.2, 3.3],
        extreme: []
      }
    }
  }])
  .render()