html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadCsvFile(

    'https://gist.githubusercontent.com/shacheeswadia/cd509e0b0c03964ca86ae7d894137043/raw/5f336c644ad61728dbac93026f3268b86b8d0680/teslaDailyData.csv',

    function (data) {

      // create data table on loaded data

      var dataTable = anychart.data.table();

      dataTable.addData(data);

​

      // create stock chart

      var chart = anychart.stock();

​

      // create first plot on the chart

      var plot = chart.plot(0);

      // set grid settings

      plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);

​

      // create and setup line series

      var lineSeries = plot.line(dataTable)

        .name('Tesla');

      // set rising/falling and normal stroke settings

      lineSeries.risingStroke('#2FA85A', 3, null, 'round', 'round');

      lineSeries.fallingStroke('#EE4237', 3, null, 'round', 'round');

​

      // create scroller series 

      chart.scroller().line(dataTable);

​

      // set chart selected date/time range

      chart.selectRange('2020-11-27', '2021-11-26');

​

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

      // sets the title of the chart

      chart.title('Tesla Inc. Stock Chart');

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});