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 for the first chart

    var data1 = [

      {x: "John", value: 5000},

      {x: "Richard", value: 5000},

      {x: "Larry", value: 5000},

      {x: "Marta", value: 15000}

    ];

​

    // create data for the second chart

    var data2 = [

      {x: "January", value: 2000},

      {x: "February", value: 4000},

      {x: "March", value: 10000},

      {x: "April", value: 9000},

      {x: "May", value: 5000}

    ];

​

    // create and configure the first chart

    var chart1 = anychart.pie(data1);

    chart1.bounds(0, "10%", "40%", "90%");

    // disable the legend

    chart1.legend(false);

    // set the chart container

    chart1.container(stage);

    // initiate drawing the chart

    chart1.draw();   

​

    // create and configure the second chart

    var chart2 = anychart.line();    

    var series = chart2.line(data2);

    series.name("Total");

    series.color("#455a64");

    chart2.bounds("40%", "10%", "60%", "90%");

    // set the chart container

    chart2.container(stage);

    // initiate drawing the chart

    chart2.draw();   

​

    // create a standalone legend

    var legend = anychart.standalones.legend();

​

    // set the source of legend items

    legend.itemsSource([chart1, chart2]);

​

    // set the padding of the legend

    legend.padding(10);

​

    // set the container for the legend

    legend.container(stage);

​

    // draw the legend

    legend.draw();

});