Box Chart


A box chart is a convenient way of graphically depicting groups of numerical data through their quartiles. Box charts are useful when it is necessary to describe the values as they spread across the entire range. For example, to analyze salaries in a company, it is necessary to have more information than the sum of salaries for each salary grade. Even a measure of average salary would not be enough.

Box charts allow showing the minimum and maximum with a median (a numerical value separating the higher half of a data sample, a population, or a probability distribution, from the lower half) and quartiles, which helps to make the story more complete. But still, giving only the highest, the lowest, and the medium values does not tell the full story. So it is often useful to display the data in a way that reveals more about the distribution of values.

This article explains how to create a basic Box chart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Box chart's characteristics:

Data Fieldsx, low, q1, median, q3, high, value, outliers
Multiple SeriesYES
VerticalVertical Box
Error BarsBox Chart with Error Bars
Chartopedia: Box Chart
General Settings

Quick Start

To create a Box chart, use the chart constructor. If you pass the data to this chart constructor, it creates a Box series.

To create a Box series explicitly, call the box() method.

The following sample demonstrates how a basic Box chart is created:

// create data
var data = [
  {x: "1", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, outliers: [800, 2500, 3200]},
  {x: "2", low: 2500, q1: 3000, median: 3800, q3: 3900, high: 4000},
  {x: "3", low: 2000, q1: 2300, median: 2500, q3: 2900, high: 3000},
  {x: "4", low: 4000, q1: 5000, median: 6500, q3: 6500, high: 7000, outliers: [8930]},
  {x: "5", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, outliers: [6950, 3000]}

// create a chart
chart =;

// create a box series and set the data
series =;

// set the container id

// initiate drawing the chart

JsFiddle Playground

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Area chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings


Here is a full list of methods used to configure visual settings that are available for the Box series:

You can learn more from the Appearance Settings section.

In the sample below, there are two Box series with some of the appearance settings configured:

// configure the visual settings of the first series
series1.fill("#00cc99", 0.4);
series1.hoverFill("#00cc99", 0.2);
series1.selectFill("#00cc99", 0.6);
series1.stroke("#00cc99", 1, "10 5", "round");
series1.hoverStroke("#00cc99", 2, "10 5", "round");
series1.selectStroke("#00cc99", 4, "10 5", "round");

// configure the visual settings of the second series
series2.hoverStroke("#000", 2);
series2.selectStroke("#000", 4);

JsFiddle Playground


A median is a special line across a box.

Here are methods that allow you to configure the stroke of medians in the normal state, on hover, and on select:

// configure medians
series.hoverMedianStroke("#000", 2);
series.selectMedianStroke("#000", 4);

JsFiddle Playground


Not every box has outliers: they are optional values that belong to a category, but do not fit the range between the low and the high values.

You can adjust the appearance, type, and size of outliers (in the normal state, on hover, and on select) by using the following methods:

// configure outliers
  {fill: "#DC143C 0.7",
  stroke: {color: "#dc143c", thickness: 0.5, dash: "5 1", lineJoin: "round"},
  size: 10,
  type: "star5"});
  {fill: "#dc143c 0.5",
  stroke: {color: "#dc143c", thickness: 1, dash: "5 1", lineJoin: "round"},
  size: 10,
  type: "star5"});
  {fill: "#dc143c",
  stroke: {color: "#dc143c", thickness: 2, dash: "5 1", lineJoin: "round"},
  size: 10,
  type: "star5"});

Note: These settings are configured in JSON format. Learn more about using JSON with AnyChart: Getting Data from JSON.

JsFiddle Playground


Stems are vertical sticks that go beyond boxes and show the difference between the low value and the first quartile and between the third quartile and the high value.

Use these methods to configure the stroke of stems in the normal state, on hover, and on select:

// configure stems
series.stemStroke("#f44336", 1, "5 2");
series.hoverStemStroke("#f44336", 2, "5 2", "round", "round");
series.selectStemStroke("#f44336", 3, "5 2");

JsFiddle Playground


Whiskers are horizontal line segments on the tops of stems. Here are methods that allow you to configure their appearance:

Note: By default the width is 0.

// configure whiskers
series.whiskerStroke("#c2b65d", 0.7);
series.hoverWhiskerStroke("#c2b65d", 0.5);
series.selectWhiskerStroke("#c2b65d", 1);

JsFiddle Playground


Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.


A Tooltip is a text box displayed when a point on a chart is hovered. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Vertical Box

Most types of series in AnyChart can be drawn both in horizontal and vertical orientation: Vertical Charts.

Here is the information about creating Vertical Box series: Vertical Box.

You are looking at an outdated 7.14.3 version of this document. Switch to the 8.2.1 version to see the up to date information.