html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/csv-data/msft-daily-short-data(2011-2016).js

​

  // create data table on loaded data

  var dataTable = anychart.data.table();

  dataTable.addData(get_msft_daily_short_data()); // eslint-disable-line no-undef

​

  // map data for the candlestick and VWAP series

  var mapping = dataTable.mapAs({

    open: 1,

    high: 2,

    low: 3,

    close: 4,

    volume: 5

  });

​

  // map data for scroller

  var valueMapping = dataTable.mapAs({ value: 5 });

​

  // create stock chart

  var chart = anychart.stock();

​

  // create candlestick series on the first plot

  var firstPlot = chart.plot(0);

  firstPlot.yAxis(1).orientation('right');

  firstPlot.candlestick(mapping).name('MSFT');

​

  // create VWAP indicator on the first plot

  var vwap = firstPlot.vwap(mapping);

​

  // set vwap indicator series stroke color & thickness

  vwap.series().stroke('#1976d2', 3);

​

  // create MACD indicator on the second plot

  var secondPlot = chart.plot(1);

  secondPlot.height('30%');

  secondPlot.yAxis(1).orientation('right');

  secondPlot.macd(mapping);

​

​

  // create scroller series

  chart.scroller().area(valueMapping);

​

  // set chart selected date/time range

  chart.selectRange('2011-08-21', '2016-01-01');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

​

  // create range picker

  var rangePicker = anychart.ui.rangePicker();

  // init range picker

  rangePicker.render(chart);

​

  // create range selector

  var rangeSelector = anychart.ui.rangeSelector();

  // init range selector

  rangeSelector.render(chart);

});