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/csco-daily.csv

  anychart.data.loadCsvFile('https://cdn.anychart.com/csv-data/csco-daily.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});

​

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

​

    var series = plot.candlestick(mapping);

    series.name('CSCO');

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

​

​

    //create annotations

​

    // create a plot on the chart

    var plot = chart.plot(0);

​

    // access the annotations() object of the plot to work with annotations

    var controller = plot.annotations();

​

    // create a Label annotation

    controller.label({

      xAnchor: '2008-12-14',

      valueAnchor: 25,

      text: "Target",

      background: {

        fill: 'white',

        stroke: 'none'

      },

      fontColor: 'green'

    });

​

    //create horizontal line annotations

    controller.horizontalLine({

      valueAnchor: 15

    });

​

    controller.horizontalLine({

      valueAnchor: 25,

      stroke: {

        color: 'green',

        thickness: 2,

        dash: '10 2'

      }

    });

​

    //create line segments

    controller.line({

      xAnchor: "2007-09-02",

      valueAnchor: 37,

      secondXAnchor: "2008-03-30",

      secondValueAnchor: 13,

      stroke: {

        color: 'green',

        thickness: 2,

        dash: '10 2'

      }

    });

​

    controller.line({

      xAnchor: "2008-03-30",

      valueAnchor: 13,

      secondXAnchor: "2009-01-04",

      secondValueAnchor: 28,

      stroke: {

        color: 'blue',

        thickness: 3,

        dash: '3 5'

      }

    });

​

    //create range markers

    var xAxis = chart.plot(0).xAxis();

    // create range marker

    chart.plot(0).rangeMarker(0)

      .from('2008-07-07')

      .to('2009-01-04')

    // set marker inner color

      .fill("#ffbac8 0.3")

    // set axis

      .axis(xAxis);

​

    // create range marker

    chart.plot(0).rangeMarker(1)

      .from('2006-07-06')

      .to('2008-07-06')

    // set marker inner color

      .fill("#5af790 0.3")

    // set axis

      .axis(xAxis);

​

​

    chart.plot(0).rangeMarker(2)

      .from('2009-01-05')

      .to('2009-06-28')

    // set marker inner color

      .fill("#d3d3d3 0.3")

    // set axis

      .axis(xAxis);

​

    var grouping = chart.grouping();

    // set the max number of points

    grouping.maxVisiblePoints(500);

​

    // set container id for the chart and render

    chart.container('container').draw();

    // set chart selected date/time range

    chart.selectRange('points', 500, 'last-date', true);

  });

});