html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // set the data

    table = anychart.data.table('x');

    table.addData([

{x: '2016-04-01', h: 19.36, l: 18.18},

{x: '2016-04-02', h: 19.89, l: 19.00},

{x: '2016-04-03', h: 19.15, l: 18.43},

{x: '2016-04-06', h: 18.76, l: 18.27},

{x: '2016-04-07', h: 19.14, l: 18.63},

{x: '2016-04-08', h: 19.62, l: 18.96},

{x: '2016-04-09', h: 19.70, l: 19.22},

{x: '2016-04-13', h: 19.85, l: 19.37},

{x: '2016-04-14', h: 19.55, l: 19.00},

{x: '2016-04-15', h: 19.25, l: 18.51},

{x: '2016-04-16', h: 19.78, l: 18.99},

{x: '2016-04-17', h: 19.69, l: 19.00},

{x: '2016-04-20', h: 18.95, l: 18.57},

{x: '2016-04-21', h: 19.08, l: 18.57},

{x: '2016-04-22', h: 19.19, l: 18.70},

{x: '2016-04-23', h: 18.94, l: 18.47},

{x: '2016-04-24', h: 21.20, l: 19.50},

{x: '2016-04-27', h: 20.82, l: 20.28},

{x: '2016-04-28', h: 20.27, l: 19.79},

{x: '2016-04-29', h: 20.89, l: 20.06},

{x: '2016-04-30', h: 21.10, l: 20.01},

{x: '2016-05-01', h: 20.35, l: 19.86},

{x: '2016-05-04', h: 20.40, l: 19.98},

{x: '2016-05-05', h: 20.24, l: 19.64},

{x: '2016-05-06', h: 20.07, l: 19.61},

{x: '2016-05-07', h: 19.99, l: 19.14},

{x: '2016-05-08', h: 19.64, l: 19.14},

{x: '2016-05-11', h: 19.73, l: 19.01},

{x: '2016-05-12', h: 20.06, l: 19.47},

{x: '2016-05-13', h: 20.00, l: 19.67},

{x: '2016-05-14', h: 20.23, l: 19.80},

{x: '2016-05-15', h: 20.50, l: 19.98},

{x: '2016-05-18', h: 20.60, l: 20.24},

{x: '2016-05-19', h: 20.74, l: 20.25},

{x: '2016-05-20', h: 20.69, l: 20.22},

{x: '2016-05-21', h: 20.23, l: 19.51},

{x: '2016-05-22', h: 20.17, l: 19.47},

{x: '2016-05-26', h: 20.45, l: 19.45},

{x: '2016-05-27', h: 20.60, l: 20.07},

{x: '2016-05-28', h: 20.63, l: 20.05},

{x: '2016-05-29', h: 20.94, l: 20.30},

{x: '2016-06-01', h: 21.50, l: 20.86},

{x: '2016-06-02', h: 21.98, l: 21.20},

{x: '2016-06-03', h: 21.76, l: 21.29},

{x: '2016-06-04', h: 21.90, l: 21.58},

{x: '2016-06-05', h: 22.31, l: 21.81},

{x: '2016-06-08', h: 22.32, l: 21.63},

{x: '2016-06-09', h: 22.32, l: 21.88},

{x: '2016-06-10', h: 22.62, l: 22.12},

{x: '2016-06-11', h: 23.26, l: 22.57},

{x: '2016-06-12', h: 23.38, l: 22.74},

{x: '2016-06-15', h: 23.54, l: 23.02},

{x: '2016-06-16', h: 24.11, l: 23.44},

{x: '2016-06-17', h: 23.82, l: 23.17},

{x: '2016-06-18', h: 23.69, l: 23.30},

{x: '2016-06-19', h: 24.34, l: 23.75},

{x: '2016-06-22', h: 23.95, l: 23.25},

{x: '2016-06-23', h: 23.66, l: 23.21},

{x: '2016-06-24', h: 23.75, l: 23.36},

{x: '2016-06-25', h: 23.92, l: 23.20},

{x: '2016-06-26', h: 23.69, l: 23.32},

{x: '2016-06-29', h: 24.03, l: 23.55},

{x: '2016-06-30', h: 24.24, l: 23.63},

{x: '2016-07-01', h: 24.30, l: 23.96},

{x: '2016-07-02', h: 24.04, l: 23.21} 

    ]);

    // map the data

    mapping = table.mapAs({high:'h', low:'l'});

​

    // chart type

    var chart = anychart.stock();

​

    // set the series

    var series = chart.plot(0).hilo(mapping);

    series.name("ACME Corp. stock prices");

​

    chart.title('Stock HiLo Demo: ACME Corp. Stock Prices \n(Object data notation)');

    chart.container('container');

    chart.draw();

});