Box Chart | Box Charts | src | Gallery

HTMLcopy

 
<div id="container"></div>

CSScopy

 
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
  var data = [
    {
      x: 'East Europe',
      low: 1,
      q1: 5,
      median: 8,
      q3: 12,
      high: 16
    },
    {
      x: 'West Europe',
      low: 1,
      q1: 7,
      median: 10,
      q3: 17,
      high: 22
    },
    {
      x: 'Australia',
      low: 1,
      q1: 8,
      median: 12,
      q3: 19,
      high: 26
    },
    {
      x: 'South America',
      low: 2,
      q1: 8,
      median: 12,
      q3: 21,
      high: 28
    },
    {
      x: 'North America',
      low: 3,
      q1: 10,
      median: 17,
      q3: 28,
      high: 30
    },
    {
      x: 'Oceania',
      low: 1,
      q1: 9,
      median: 16,
      q3: 22,
      high: 24
    },
    {
      x: 'North Africa',
      low: 1,
      q1: 8,
      median: 14,
      q3: 18,
      high: 24
    },
    {
      x: 'West Africa',
      low: 1,
      q1: 6,
      median: 8,
      q3: 13,
      high: 16
    },
    {
      x: 'Central Africa',
      low: 2,
      q1: 4,
      median: 9,
      q3: 12,
      high: 15
    },
    {
      x: 'Southern Africa',
      low: 1,
      q1: 4,
      median: 8,
      q3: 11,
      high: 14
    }
  ];
​
  // create box chart
  var chart = anychart.box();
​
  // set chart title text settings
​
  chart.title('Oceanic Airlines Delays December, 2014');
​
  // set axes settings
  chart.xAxis().staggerMode(true);
​
  chart.box(data);
​
  // set container id for the chart
  chart.container('container');
​
  // initiate chart drawing
  chart.draw();
});

Sample meta

AnyChart Documentation