html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create a stage

  var stage = anychart.graphics.create("container");

​

  // create data

  var data = [

    ["P1", 10000],

    ["P2", 12000],

    ["P3", 18000],

    ["P4", 11000],

    ["P5", 9000]

  ];

​

  // create and configure the first chart

  var column1 = anychart.column(data);

  column1.title("Chart Background");

  column1.bounds(0, 0, "50%", "100%");

  // configure the background of the chart

  column1.background({fill: "#ffd54f 0.2"});

  // set the chart container

  column1.container(stage);

  // initiate drawing the chart

  column1.draw();

​

  // create and configure the first chart

  var column2 = anychart.column(data);

  column2.title("Data Area Background");

  column2.bounds("50%", 0, "50%", "100%");

  // configure the background of the data area

  column2.dataArea().background().enabled(true);

  column2.dataArea().background().fill("#ffd54f 0.2");

  // set the chart container

  column2.container(stage);

  // initiate drawing the chart

  column2.draw();   

});