html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var data = [

    {x:'Western Europe', low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},

    {x:'North America', low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},

    {x:'Australia & New Zealand', low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},

    {x:'Middle East & Northern Africa', low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},

    {x:'Latin America & Caribbean', low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},

    {x:'Southeastern Asia', low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},

    {x:'Central & Eastern Europe', low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},

    {x:'Eastern Asia', low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},

    {x:'Sub-Saharan Africa', low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},

    {x:'Southern Asia', low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}

  ];

​

  // create a chart

  var chart = anychart.box();

​

  // create a box series and set the data

  var series = chart.box(data);

​

  // set the chart title

  chart.title('Happiness Level by Region');

​

  // label axis

  chart.xAxis().title('Regions');

  chart.yAxis().title('Happiness Level');

​

  // stagger the x-axis labels

  chart.xAxis().staggerMode(true);

​

  // configure visual appearance of series

  series.normal().fill('#36558F', 0.2);

  series.hovered().fill('#36558F', 0.2);

  series.selected().fill('#36558F', 0.6);

  series.normal().stroke('#36558F', 1);

  series.hovered().stroke('#36558F', 2);

  series.selected().stroke('#36558F', 2);

​

  // configure medians

  series.normal().medianStroke('#dd2c00', 2);

  series.hovered().medianStroke('#dd2c00', 2);

  series.selected().medianStroke('#dd2c00', 2);

​

  // configure outliers

  series.normal().outlierMarkers({

    fill: '#36558F 0.2',

    stroke: { color: '#36558F', thickness: 1 },

    size: 5,

    type: 'star5'

  });

  series.hovered().outlierMarkers({

    fill: '#36558F 0.2',

    stroke: { color: '#36558F', thickness: 2 },

    size: 5,

    type: 'star5'

  });

  series.selected().outlierMarkers({

    fill: '#36558F 0.6',

    stroke: { color: '#36558F', thickness: 4 },

    size: 7.5,

    type: 'star5'

  });

​

  // configure stems

  series.normal().stemStroke('#36558F', 0.5);

  series.hovered().stemStroke('#36558F', 1);

  series.selected().stemStroke('#36558F', 2);

​

  // configure whiskers

  series.whiskerWidth(50);

  series.normal().whiskerStroke('#36558F', 0.5);

  series.hovered().whiskerStroke('#36558F', 1);

  series.selected().whiskerStroke('#36558F', 2);

​

  // configure tooltip

  chart.tooltip().titleFormat('Region: {%x}');

  chart.tooltip().format('Low: {%low} \n High: {%high} \n Quantile 1: {%q1} \n Quantile 3: {%q3} \n Median: {%median} \n Outliers: {%outliers}');

​

  // set the container id

  chart.container('container');

​

  // initiate drawing the chart

  chart.draw();

​

});