html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data

  var data = ([

    ["White", 507, 511, 506, 510],

    ["Black", 510, 511, 506, 507],

    ["Long lower shadow", 508.5, 511, 506, 510],

    ["Long upper shadow", 508.5, 511, 506, 507],

    ["Hammer", 510, 511, 506, 511],

    ["Inverted hammer", 507, 511, 506,506],

    ["Spinning top white", 508, 511, 506, 509],

    ["Spinning top black", 509, 511, 506, 508],

    ["Four Price Doji", 508.5, 508.5, 508.5, 508.5],

    ["Long legged doji", 508.5, 511, 506, 508.5],

    ["Dragonfly doji", 511, 511, 506, 511],

    ["Gravestone doji", 506, 511, 506, 506],

    ["Marubozu white", 506, 511, 506, 511],

    ["Marubozu black", 511, 511, 506, 506]

  ]);

​

  // create a chart

  var chart = anychart.cartesian();

  // set the interactivity mode

  chart.interactivity("by-x");

​

  // rotate the labels on the x-axis

  chart.xAxis().labels().rotation(-90);

​

  // create a series, set the data and configure visual settings

  var series = chart.candlestick(data);

  series.fallingFill("black");

  series.fallingStroke("black");

  series.risingFill("white");

  series.risingStroke("black");

​

  // set the interactivity mode

  chart.interactivity("by-x");

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

});