html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // data

  var data = [

    {x: Date.UTC(2007, 7, 28), open:511.53, high:514.98, low:505.79, close:506.40},

    {x: Date.UTC(2007, 7, 29), open:507.84, high:513.30, low:507.23, close:512.88},

    {x: Date.UTC(2007, 7, 30), open:512.36, high:515.40, low:510.58, close:511.40},

    {x: Date.UTC(2007, 7, 31), open:513.10, high:516.50, low:511.47, close:515.25},

    {x: Date.UTC(2007, 8, 4), open:515.02, high:528.00, low:514.62, close:525.15}

  ];

  // chart type

  var chart = anychart.financial();

  // set axes title

  var xAxis = chart.xAxis();

  xAxis.title("Day");

  xAxis.staggerLines(1);

  var yAxis = chart.yAxis();

  yAxis.title("Price");

  // chart title

  chart.title("Open High Low Close (OHLC) Chart");

  // adjust x scale type

  var scale = chart.xScale();

  scale.minimum(Date.UTC(2007, 7, 27));

  scale.maximum(Date.UTC(2007, 8, 5));

  var xTicks = scale.ticks();

  xTicks.interval(0,0,1);

  // set data and define chart type

  var series = chart.ohlc(data);

  // set x axis labels width for the better outlook

  var xLabels = chart.xAxis().labels();

  xLabels.format(function(value){

    var date = new Date(value["tickValue"]);

    var options = {

      day: "numeric",

      month: "short"

    };

    return date.toLocaleDateString("en-US", options);

  });

  // change the selected regions color to the dark violet from the default

  series.risingStroke("#5400BA");

  series.hoverRisingStroke("#C3A6E7");

  // set interactivity mode

  var interactivity = chart.interactivity();

  interactivity.hoverMode("byX");

  // set container

  chart.container("container");

  // limit width of each point in series

  series.pointWidth(chart.container().width()/15);

  //draw chart

  chart.draw();

  // enabling the selection

  series.select([1,2]);

});