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

  chart = anychart.box();

​

  // create a box series and set the data

  series = chart.box(data);

  // set the chart title

  var 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();

​

});