html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadCsvFile(

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

    'https://cdn.anychart.com/csv-data/orcl-daily-short-data(2011-2016).csv',

    function (data) {

      // create data table on loaded data

      var dataTable = anychart.data.table();

      dataTable.addData(data);

​

      // map loaded data for the ohlc series

      var mapping = dataTable.mapAs({

        open: 1,

        high: 2,

        low: 3,

        close: 4

      });

​

      // map loaded data for the scroller

      var scrollerMapping = dataTable.mapAs();

      scrollerMapping.addField('value', 5);

​

      // create stock chart

      var chart = anychart.stock();

​

      // set chart title

      chart.title('Annotated OHLC Chart');

​

      // set chart padding

      chart.padding([15, 50, 57, 50]);

​

      // create plot on the chart

      var plot = chart.plot();

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

​

      var series = plot.ohlc(mapping).name('CSCO');

      series.legendItem().iconType('rising-falling');

​

      // create annotation

      var annotation = plot.annotations();

      // create line annotation

      annotation.line({

        // X - part of the first anchor

        xAnchor: '2011-01-02',

        // Y - part of the first anchor

        valueAnchor: 11.5,

        // X - part of the second anchor

        secondXAnchor: '2011-08-07',

        // Y - part of the second anchor

        secondValueAnchor: 9,

        stroke: '2 #DD3F2A',

        // set hover stroke settings

        hovered: {

          stroke: '2 #DD3F2A'

        }

      });

      // create horizontalLine annotation

      annotation.horizontalLine({

        // X - part of the first anchor

        xAnchor: '2011-01-02',

        // Y - part of the first anchor

        valueAnchor: 16,

        // X - part of the second anchor

        secondXAnchor: '2016-06-12',

        // Y - part of the second anchor

        secondValueAnchor: 16,

        // set stroke settings

        stroke: {

          thickness: 2,

          color: '#60727B',

          dash: '10 15'

        },

        // set hover stroke settings

        hovered: {

          stroke: {

            thickness: 2,

            color: '#60727B',

            dash: '10 15'

          }

        }

      });

      // create finiteTrendChannel annotation

      annotation.finiteTrendChannel({

        // X - part of the first anchor

        xAnchor: '2011-08-07',

        // Y - part of the first anchor

        valueAnchor: 9,

        // X - part of the second anchor

        secondXAnchor: '2015-01-04',

        // Y - part of the second anchor

        secondValueAnchor: 19,

        // width of the trend channel

        channelWidth: 6,

        // set stroke settings

        stroke: '2 #6E9C4E',

        // set fill settings

        fill: '#6E9C4E 0.3',

        // set hover fill/stroke settings

        hovered: {

          fill: '#6E9C4E 0.2',

          stroke: '2 #6E9C4E'

        }

      });

​

      // create scroller series with mapped data

      chart.scroller().ohlc(mapping);

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

    }

  );

});