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 ohlc series

  var ohlcMapping = dataTable.mapAs({

    open: 1,

    high: 2,

    low: 3,

    close: 4

  });

​

  // map data for scroller and volume series

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

  var volumeMapping = dataTable.mapAs({ volume: 5 });

​

  // create stock chart

  var chart = anychart.stock();

​

  // create ohlc series on the first plot

  chart.plot(0).ohlc(ohlcMapping);

​

  // create and setup volume plot

  var volumePlot = chart.plot(1);

  volumePlot.height('30%');

  volumePlot

    .yAxis()

    .labels()

    .format('${%Value}{scale:(1000000)(1000)|(kk)(k)}');

​

  // create and setup volume+MA indicator

  var volumeMaIndicator = volumePlot.volumeMa(

    volumeMapping,

    20,

    'sma',

    'column',

    'splineArea'

  );

  var maSeries = volumeMaIndicator.maSeries();

  maSeries.stroke('red');

  maSeries.fill('red .2');

  volumeMaIndicator.volumeSeries('column');

​

  // create scroller series

  chart.scroller().area(valueMapping);

​

  // set chart selected date/time range

  chart.selectRange('2015-09-01', '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);

});