Box Plot

[Configuration Manual]

Introduction

A box plot (English: box plot), also known as a box-whisker plot, box chart, box plot, or box-line chart, is a statistical chart used to display the dispersion of a data set. It is named because the shape of the chart is like a box and there are often lines extending around the upper and lower quartiles like whiskers. It is mainly used to reflect the distribution characteristics of raw data and can also be used to compare the distribution characteristics of multiple groups of data. It can display the maximum value, minimum value, median and upper and lower quartiles of a set of data. When there is a value that is different from the range of 1.5×IQR above the upper and lower quartiles, that value is an outlier. Outlier values are sometimes drawn as individual points.

Chart Composition

Box plots are made up of box plot elements (box plot elements are a special type of chart element, based on the VGrammr Glyph chart element packaging) and other components.

The box plot element is the basic element of a box plot. To draw a complete box plot element, the following drawing configurations are essential:

• boxPlotChart.type: Chart type, the type of box plot is 'boxPlot'
• boxPlotChart.data: Data source for chart drawing
• boxPlotChart.xField: x-axis field, when direction: 'vertical', maps the x-coordinate of the chart element
• boxPlotChart.yField: y-axis field, when direction: 'horizontal', maps the y-coordinate of the chart element
• boxPlotChart.minField: Numeric field, representing the minimum value of the data, mapping the lower border line of the box plot element
• boxPlotChart.q1Field: Numeric field, representing the lower quartile value of the data, mapping the lower border of the box plot element box
• boxPlotChart.medianField: Numeric field, representing the median value of the data, mapping the middle line of the box plot element box
• boxPlotChart.q3Field: Numeric field, representing the upper quartile of the data, mapping the upper border of the box plot element box
• boxPlotChart.maxField: Numeric field, representing the maximum value of the data, mapping the upper border line of the box plot element

Components such as coordinate axes and tooltips, which help present the chart, are optional configurations with built-in default effects and functions:

• boxPlotChart.axes: Coordinate axis component, displayed by default and automatically infers coordinate system and data mapping logic based on chart type; note that histogram does not support discrete axes, as histogram is used to display frequency distribution within data ranges, so the main axis must be input in the form of value ranges; discrete axes do not support this feature. For detailed configuration, see VChart Coordinate Axis Component Configuration
• boxPlotChart.tooltip: Tooltip information, displayed by default when interacting; for detailed configuration, see VChart Tooltip Information Component Configuration
• For more component configurations, see VChart boxPlotChart configuration

Quick Start

Key Configuration

• Set the direction property to 'vertical'
• minField, q1Field, medianField, q3Field, and maxField separately declare the minimum value, lower quartile, median, upper quartile, and maximum value fields in the data

Box Plot Features

Data

• One discrete field, e.g., x
• Five numeric fields, e.g., y1 y2 y3 y4 y5

Data is defined as follows:

data: [
  {
    name: 'boxPlot',
    values: [
      {
        x: 'A',
        y1: 5,
        y2: 8,
        y3: 10,
        y4: 12,
        y5: 20
      },
      {
        x: 'B',
        y1: 5,
        y2: 8,
        y3: 10,
        y4: 12,
        y5: 20
      },
      {
        x: 'C',
        y1: 5,
        y2: 8,
        y3: 10,
        y4: 12,
        y5: 20
      }
    ]
  }
];

Layout

Grouped Box Plot

Similar to a grouped bar chart, a grouped box plot can be thought of as a combination of different box plot series arranged with intervals, each group of box plot series representing a category. In VChart, you need to add a field to xField (at this point,xField is in array form), which is used to differentiate data categories, i.e., to split the box plot of the same dimension into several groups and spread them out in an interval arrangement. And to distinguish the interval arrangement of the box plot under the same dimension, you need to specify the boxplotChart.seriedField field, which, by default, maps the color of the box plot element.

Chart Elements and Styles

Main Configuration

Keyword	Description	Default Value
boxWidth	Box body width
shaftShape	Chart element shape	'line'
shaftWidth	Maximum and minimum width
shaftOpacity	Maximum and minimum transparency
lineWidth	Chart element stroke width

Width Adaptation

The width of the box plot chart element is adaptive by default. If you need a fixed box body width, you can configure a specific value inboxPlotChart.boxPlot.style.boxWidth.

Chart Element Shape

The box plot chart element shape is divided into 'bar' and 'line', 'line' means the chart element is only outlined, and 'bar' means the chart element is only filled. By default, it is set to 'line'. You can specify it by settingboxPlotChart.boxPlot.style.shaftShape.