html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  // create data

  var data1 = [

    {x: "Jan", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, outliers: [800, 2500, 3200]},

    {x: "Feb", low: 2500, q1: 3000, median: 3800, q3: 3900, high: 4000},

    {x: "Mar", low: 2000, q1: 2300, median: 2500, q3: 2900, high: 3000},

    {x: "Apr", low: 4000, q1: 5000, median: 6500, q3: 6900, high: 7200, outliers: [8930]},

    {x: "May", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, outliers: [6950, 3000]}

  ];

  var data2 = [

    {x: "Jan", low: 4000, q1: 4050, median: 6200, q3: 6800, high: 7000},

    {x: "Feb", low: 1500, q1: 2000, median: 2500, q3: 3000, high: 3500},

    {x: "Mar", low: 2000, q1: 2200, median: 3000, q3: 3200, high: 3000},

    {x: "Apr", low: 3600, q1: 4000, median: 6900, q3: 7300, high: 8000},

    {x: "May", low: 7800, q1: 8050, median: 8350, q3: 8400, high: 9000}

  ];

​

  // create a chart

  var chart = anychart.box();

​

  // create the first series, set the data and name

  series1 = chart.box(data1);

  series1.name("Documentary Movies");

​

  // configure the visual settings of the first series

  series1.normal().fill("#00cc99", 0.3);

  series1.hovered().fill("#00cc99", 0.1);

  series1.selected().fill("#00cc99", 0.5);

  series1.normal().stroke("#00cc99", 1, "10 5", "round");

  series1.hovered().stroke("#00cc99", 2, "10 5", "round");

  series1.selected().stroke("#00cc99", 4, "10 5", "round");

​

  // create the second series, set the data and name

  series2 = chart.box(data2);

  series2.name("Sci-Fi Movies");

​

  // configure the visual settings of the second series

  series2.normal().fill("#0066cc", 0.3);

  series2.hovered().fill("#0066cc", 0.1);

  series2.selected().fill("#0066cc", 0.5);

  series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);

  series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);

  series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);

  series2.normal().stroke("#0066cc");

  series2.hovered().stroke("#0066cc", 2);

  series2.selected().stroke("#0066cc", 4);

​

  // set the chart title

  var title = chart.title("Box Chart: Appearance");

​

  // set the interactivity mode

  chart.interactivity("by-x");

​

  // enable the legend

  chart.legend(true);

  // set the container id

  chart.container("container");

  // initiate drawing the chart

  chart.draw();

});