Box Chart

• Overview
• Quick Start
• General Settings
• Special Settings
  • Appearance
    • Median
    • Outliers
    • Stems
    • Whiskers
  • Labels
  • Tooltips
  • Vertical Box

Overview

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:

Quick Start

To create a Box chart, use the anychart.box() 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 = anychart.box();

// create a box series and set the data
series = chart.box(data);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

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

Appearance

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

• color(), fill(), hatchFill(), stroke() set the color, fill, hatch fill, and stroke
• hoverFill(), hoverHatchFill(), hoverStroke() configure the visual settings on hover
• selectFill(), selectHatchFill(), selectStroke() configure the visual settings on select

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.color("none");
series2.hatchFill("forwardDiagonal");
series2.hoverHatchFill("backwardDiagonal");
series2.selectHatchFill("diagonalCross");
series2.stroke("#000");
series2.hoverStroke("#000", 2);
series2.selectStroke("#000", 4);

Median

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:

• medianStroke()
• hoverMedianStroke()
• selectMedianStroke()

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

Outliers

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:

• outlierMarkers()
• hoverOutlierMarkers()
• selectOutlierMarkers()

  // configure outliers
  series.outlierMarkers(
    {fill: "#DC143C 0.7",
    stroke: {color: "#dc143c", thickness: 0.5, dash: "5 1", lineJoin: "round"},
    size: 10,
    type: "star5"});
  series.hoverOutlierMarkers(
    {fill: "#dc143c 0.5",
    stroke: {color: "#dc143c", thickness: 1, dash: "5 1", lineJoin: "round"},
    size: 10,
    type: "star5"});
  series.selectOutlierMarkers(
    {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.

Stems

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:

• stemStroke()
• hoverStemStroke()
• selectStemStroke()

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

  Playground

Whiskers

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

• whiskerWidth() and {api:anychart.core.cartesian.series.Box#whiskerStroke){api} set the width and stroke
• hoverWhiskerWidth() and hoverWhiskerStroke() set the width and stroke on hover
• selectWhiskerWidth() and selectWhiskerStroke() set the width and stroke on select

Note: By default the width is 0.

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

Labels

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.

Tooltips

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.