html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // load stock data:

  // for apple

  anychart.data.loadCsvFile(

    "https://cdn.anychart.com/csv-data/AAPL.csv",

    function (appleData) {      

      // for microsoft

      anychart.data.loadCsvFile(

        "https://cdn.anychart.com/csv-data/MSFT.csv",

        function (msData) {          

          // for alphabet (google)

          anychart.data.loadCsvFile(

            "https://cdn.anychart.com/csv-data/GOOG.csv",

            function (googleData) {

              // create data tables:

              // for apple

              let appleDataTable = anychart.data.table();

              appleDataTable.addData(appleData);

              // for microsoft

              let msftDataTable = anychart.data.table();

              msftDataTable.addData(msData);

              // for alphabet (google)

              let googleDataTable = anychart.data.table();

              googleDataTable.addData(googleData);

​

              // create a stock chart

              let chart = anychart.stock();

​

              // create a stock plot with three line series

              let plot = chart.plot(0);

              plot

                .line()

                .name("AAPL")

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

                .stroke("1.5 #7CC7FF");

              plot

                .line()

                .name("MSFT")

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

                .stroke("1.5 #3498DB");

              plot

                .line()

                .name("GOOG")

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

                .stroke("1.5 #0000DD");

              // create annotations:

              // access the object

              let controller = plot.annotations();

              // create a marker annotation

              let marker = controller.marker({

                xAnchor: "2021-11-11",

                valueAnchor: 368,

                markerType: 'arrow-down',

                size: 20,

                offsetY: 0,

                offsetX: 0

              });

              // create a label annotation

              controller

                .label()

                .xAnchor("2021-09-01")

                .valueAnchor(374)

                .anchor("right-top")

                .offsetY(5)

                .padding(6)

                .text("Record highs after 20 months of the pandemic")

                .fontColor("#666")

                .background({

                  fill: "#fff 0.65",

                  stroke: "0.5 #c20000",

                  corners: 2

                });

              // create event markers:

              // access the object

              let eventMarkers = plot.eventMarkers();

              // set the symbol

              plot.eventMarkers().format(function () {

                return this.getData("symbol");

              });

              // set the data

              eventMarkers.data([

                {

                  symbol: "1",

                  date: "2020-03-11",

                  description: "COVID-19 declared a global pandemic by the WHO"

                },

                {

                  symbol: "2",

                  date: "2022-02-24",

                  description: "Ukraine attacked by Russia"

                },

                {

                  symbol: "3",

                  date: "2022-05-10",

                  description: "Start of the 2022 crypto winter"

                }

              ]);

              // create a scroller series with msft data

              chart.scroller().area(msftDataTable.mapAs({ value: 4 }));

              // create a date range ui:

              // picker

              let rangePicker = anychart.ui.rangePicker();

              rangePicker.render(chart);

              // selector

              let rangeSelector = anychart.ui.rangeSelector();

              rangeSelector.render(chart);

              chart.selectRange("2017-01-01", "2023-09-01");

              // set the stock chart title

              chart

                .title()

                .enabled(true)

                .useHtml(true)

                .text(

                  '<span style = "color: #111; font-size:18px; margin-bottom:15px; dy:20px">Decade of Tech Titan Stocks</span>' +

                    '<br/><span style="color:grey; font-size: 14px; margin-bottom:10px;">Comparing <span style="color:#7CC7FF;">Apple</span>, <span style="color:#3498DB;">Microsoft</span>, and <span style="color:#0000DD;">Alphabet</span> stock prices from 2013 to 2023</span>'

                );

​

              // set the stock chart container id

              chart.container("container");

              // initiate the stock chart drawing

              chart.draw();

            }

          );

        }

      );

    }

  );

});