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

​

        // map loaded data for the scroller

        var scrollerMapping = dataTable.mapAs();

        scrollerMapping.addField('value', 5);

​

        // create stock chart

        var chart = anychart.stock();

        // set chart padding

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

​

        // create first plot on the chart

        var plot = chart.plot(0);

        // grid settings

        plot.yGrid(true)

            .xGrid(true)

            .xMinorGrid(true)

            .yMinorGrid(true);

​

        // create EMA indicators with period 50

        var ema = plot.ema(dataTable.mapAs({'value': 4}));

        ema.series().stroke('1.5 Red');

              // create EMA indicators with period 50

        var ema = plot.ema(dataTable.mapAs({'value': 7}));

        ema.series().stroke('2 Black');

​

        // create candlestick series

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

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

​

        // create annotation

        var annotation = plot.annotations();

​

        // create first marker annotation and set settings

        annotation.marker()

            .xAnchor(954090366593)

            .valueAnchor(85)

            .stroke('2 #F44336')

            .markerType('arrow-down')

            .allowEdit(false);

​

        // create second marker annotation and set settings

        annotation.marker()

            .xAnchor(959108502857)

            .valueAnchor(49.1)

            .fill('green 0.5')

            .stroke('2 green 0.75')

            .allowEdit(false);

​

        // create first label annotation and set settings

        annotation.label()

            .xAnchor(954090366593)

            .valueAnchor(85)

            .anchor('right-top')

            .offsetX(20)

            .offsetY(-4)

            .padding(6)

            .text('SELL')

            .fontColor('#fff')

            .background({

                fill: 'red 0.75',

                stroke: '0.5 #455a64',

                corners: 7

            })

            .allowEdit(false);

​

        // create second label annotation and set settings

        annotation.label()

            .xAnchor(959108502857)

            .valueAnchor(49.1)

            .anchor('left-bottom')

            .offsetX(20)

            .offsetY(-23)

            .padding(6)

            .text('Time to B')

            .fontColor('#fff')

            .background({

                fill: 'green 0.75',

                stroke: '1 #455a64',

                corners: 7

            })

            .allowEdit(false);

​

        // create scroller series with mapped data

        chart.scroller().candlestick(mapping);

​

        // set chart selected date/time range

        chart.selectRange('1999-10-25', '2000-10-11');

​

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

    });

});