html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // create a data set

    var data = anychart.data.set([

      [Date.UTC(2007, 07, 23), 23.55, 23.88, 23.38, 23.62],

      [Date.UTC(2007, 07, 24), 22.65, 23.7, 22.65, 23.36],

      [Date.UTC(2007, 07, 25), 22.75, 23.7, 22.69, 23.44],

      [Date.UTC(2007, 07, 26), 23.2, 23.39, 22.87, 22.92],

      [Date.UTC(2007, 07, 27), 23.98, 24.49, 23.47, 23.49],

      [Date.UTC(2007, 07, 30), 23.55, 23.88, 23.38, 23.62],

      [Date.UTC(2007, 07, 31), 23.88, 23.93, 23.24, 23.25],

      [Date.UTC(2007, 08, 01), 23.17, 23.4, 22.85, 23.25],

      [Date.UTC(2007, 08, 02), 22.65, 23.7, 22.65, 23.36],

      [Date.UTC(2007, 08, 03), 23.2, 23.39, 22.87, 22.92],

      [Date.UTC(2007, 08, 06), 23.03, 23.15, 22.44, 22.97],

      [Date.UTC(2007, 08, 07), 22.75, 23.7, 22.69, 23.44]

    ]);

​

    // create a chart

    var chart = anychart.financial();

​

    // set the interactivity mode

    chart.interactivity("byX");

    // map the data

    var seriesData = data.mapAs({x: [0], open: [1], high: [2], low: [3], close: [4]});

​

    // create a japanese candlestick series and set the data

    var series = chart.candlestick(seriesData);

    series.pointWidth(10);

    // set the chart title

    chart.title("Japanese Candlestick Chart: Basic Sample");

​

    // set the titles of the axes

    var xAxis = chart.xAxis();

    xAxis.title("Date");

    var yAxis = chart.yAxis();

    yAxis.title("Price, $");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});