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/samples/stock-chart-types/stick-chart/data.csv

  anychart.data.loadCsvFile(

    'https://cdn.anychart.com/samples/stock-chart-types/stick-chart/data.csv',

    function (data) {

      // create data tables on loaded data

      var nikeDataTable = anychart.data.table();

      nikeDataTable.addData(data);

​

      // create stock chart

      var chart = anychart.stock();

​

      // create chart series

      chart

        .plot()

        .stick()

        .data(nikeDataTable.mapAs({ value: 4 }))

        .name('NKE');

​

      chart.plot().yGrid(true);

​

      // create scroller series with mapped data

      chart.scroller().line(nikeDataTable.mapAs({ value: 4 }));

​

      // set chart selected date/time range

      chart.selectRange('2017-09-20', '2017-12-20');

​

      chart.title('NIKE, Inc. (NKE) Stock Prices');

      // 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);

    }

  );

});