html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // load csv data

  anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {

​

    // create a data table

    var dataTable = anychart.data.table();

    dataTable.addData(data);

​

    // map the columns from the data table into the ohlc format

    var mapping = dataTable.mapAs({

      date: 0,

      open: 1,

      high: 2,

      low: 3,

      close: 4

    });

​

    // add the volume data mapping

    var volumeMapping = dataTable.mapAs({

      "value": 5

    });

​

    // create a stock chart

    var chart = anychart.stock();

​

    // create the chart plot

    var plot = chart.plot(0);

​

    // create an ohlc series and bind it to the mapped data

    var ohlcSeries = plot.ohlc(mapping);

​

    // set the chart background color

    chart.background().fill("#edf4f5");

​

    // add the volume data as the scroller series

    chart.scroller().line(volumeMapping);

​

    // customize the color of the ohlc bars

    ohlcSeries.fallingFill("#ff0d0d");

    ohlcSeries.fallingStroke("#ff0d0d");

    ohlcSeries.risingFill("#43ff43");

    ohlcSeries.risingStroke("#43ff43");

​

    // additional customization for the ohlc series

    ohlcSeries.normal().risingStroke("#33ccff");

    ohlcSeries.hovered().risingStroke("#33ccff", 1.5);

    ohlcSeries.selected().risingStroke("#33ccff", 3);

    ohlcSeries.normal().fallingStroke("#ff33cc");

    ohlcSeries.hovered().fallingStroke("#ff33cc", 1.5);

    ohlcSeries.selected().fallingStroke("#ff33cc", 3);

​

    // name the ohlc series

    ohlcSeries.name("S&P");

​

    // customize the legend item for the ohlc series

    // to display a rising/falling icon

    ohlcSeries.legendItem().iconType("rising-falling");

​

    // create a date range picker

    var rangePicker = anychart.ui.rangePicker();

    rangePicker.render(chart);

​

    // create a date range selector

    var rangeSelector = anychart.ui.rangeSelector();

    rangeSelector.render(chart);

​

    // add event markers

    plot.eventMarkers({

      "groups": [

        {

          "data": [

            {

              "symbol": "1",

              "date": "2020-03-11",

              "description": "The WHO declares COVID-19 a global pandemic",

              "normal": {

                "type": "rect", "width": 40,

                "fill": "#ead9d1", "stroke": "2 #990033",

                "fontColor": "#990033", "fontWeight": 600,

                "connector": { "stroke": "2 #990033" }

              }

            },

            {

              "symbol": "2",

              "date": "2021-03-08",

              "description": "The first COVID-19 vaccine is approved for use in the U.S.",

              "normal": {

                "type": "circle",

                "fill": "#d1ead9", "stroke": "2 #009933",

                "fontColor": "#009933", "fontWeight": 600,

                "connector": { "stroke": "2 #009933" }

              }

            },

            {

              "symbol": "3",

              "date": "2022-02-24",

              "description": "Russia starts a military operation in Ukraine",

              "normal": {

                "type": "rect", "width": 40,

                "fill": "#ead9d1", "stroke": "2 #990033",

                "fontColor": "#990033", "fontWeight": 600,

                "connector": { "stroke": "2 #990033" }

              }

            },

            {

              "symbol": "4",

              "date": "2023-05-03",

              "description": "The Federal Reserve announces a rate hike to combat inflation, exceeding 5%",

              "normal": {

                "type": "circle",

                "fill": "#d1ead9", "stroke": "2 #009933",

                "fontColor": "#009933", "fontWeight": 600,

                "connector": { "stroke": "2 #009933" }

              },

              "hovered": {

                "fill": "white", "stroke": "2 #990033",

                "fontColor": "#990033",

                "connector": { "stroke": "2 #990033" }

              },

              "selected": {

                "fill": "white", "stroke": "2 #4d1a00",

                "fontColor": "#4d1a00",

                "connector": { "stroke": "2 #4d1a00" }

              }

            },

          ]

        }

      ]

    });

​

    // set the event marker symbol

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

      return this.getData("symbol");

    });

​

    // create annotations

    var annotation = plot.annotations();

    // create a rectangle annotation

    annotation.rectangle({

      xAnchor: "2022-02-24",

      valueAnchor: 3491,

      secondXAnchor: "2022-06-04",

      secondValueAnchor: 4637,

      stroke: "3 #e65a37",

      fill: "#e65a37 0.25"

    });

    // create a text label annotation

    annotation.label()

      .xAnchor("2022-02-24")

      .valueAnchor(4900)

      .anchor("left-top")

      .offsetY(5)

      .padding(6)

      .text("First 100 days since Ukraine was attacked")

      .fontColor("#fff")

      .background({

        fill: "#e65a37 0.75",

        stroke: "0.5 #2d2d2d",

        corners: 2

      });

​

    // create a kdj indicator plot

    var kdjPlot = chart.plot(1);

    // map the necessary data for the kdj calculation

    var kdjMapping = dataTable.mapAs({

      high: 2,

      low: 3,

      close: 4

    });

    // create a kdj indicator

    var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);

    // (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)

    kdj.kSeries().stroke("purple"); // customize the %k line color

    kdj.dSeries().stroke("green");  // customize the %d line color

    kdj.jSeries().stroke("orange"); // customize the %j line color

    // set the kdj plot's height

    kdjPlot.height("20%");

​

    // set the date/time range displayed by default

    chart.selectRange("2021-03-01", "2023-08-20");

​

    // set the chart title

    chart.title("S&P 500 OHLC Chart");

​

    // set the container id for the chart

    chart.container("container");

​

    // initiate the chart drawing

    chart.draw();

​

  });

​

});