html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // Load CSV data from the Gist URL

  anychart.data.loadCsvFile(

    'https://gist.githubusercontent.com/awanshrestha/a396693b2f812d3fd89f5e9db4178b6d/raw/7f91976f7c5694fb56ed6955538634b770daff94/SndP500.csv',

    function (data) {

​

      // Create a data table

      var dataTable = anychart.data.table();

      dataTable.addData(data);

​

      // Map the columns from the data table to the OHLC format

      var mapping = dataTable.mapAs({

        date: 0,     // Date column

        open: 1,     // Open column

        high: 2,     // High column

        low: 3,      // Low column

        close: 4     // Close column

      });

​

      // 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 grid settings

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

​

      // Customize the color of the candlesticks 

      ohlcSeries.fallingFill("#FF0D0D");

      ohlcSeries.fallingStroke("#FF0D0D");

      ohlcSeries.risingFill("#43FF43");

      ohlcSeries.risingStroke("#43FF43");

​

      // Additional customization for 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 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 range for selecting a date

      var rangePicker = anychart.ui.rangePicker();

      rangePicker.render(chart);

      // Create a range selector

      var rangeSelector = anychart.ui.rangeSelector();

      rangeSelector.render(chart);

​

      // add event markers

      plot.eventMarkers({

        "groups": [

          {

            "data": [

              {

                "symbol": "1",

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

                "description": "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 United States",

                "normal": {

                  "type": "circle",

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

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

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

                }

              },

              {

                "symbol": "3",

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

                "description": "Russia invades Ukraine, sparking a global sell-off in stocks and other assets",

                "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 raise interest rates to more than 5% to  combat inflation",

                "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 symbol of event markers

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

        return this.getData("symbol");

      });

      // Set chart background color

      chart.background().fill('#edf4f5'); // Background

      // create an annotation

      var annotation = plot.annotations();

​

      // create a rectangle

      annotation.rectangle({

        // X - part of the first anchor

        xAnchor: '2022-02-24',

        // Y - part of the first anchor

        valueAnchor: 3491,

        // X - part of the second anchor

        secondXAnchor: '2022-06-04',

        // Y - part of the second anchor

        secondValueAnchor: 4637,

        // set the stroke settings

        stroke: '3 #e65a37',

        // set the fill settings

        fill: '#e65a37 0.25'

      });

      // create a text label

      annotation

        .label()

        .xAnchor('2022-02-24')

        .valueAnchor(4900)

        .anchor('left-top')

        .offsetY(5)

        .padding(6)

        .text('The first 100 days of Russia Ukraine War')

        .fontColor('#fff')

        .background({

          fill: '#e65a37 0.75',

          stroke: '0.5 #2d2d2d',

          corners: 2

        });

      // Create a KDJ indicator plot

      var kdjPlot = chart.plot(1); // New plot for KDJ

​

      // Map the necessary data for KDJ calculation

      var kdjMapping = dataTable.mapAs({

        high: 2,

        low: 3,

        close: 4

      });

​

      // Create the 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 plot's height

      kdjPlot.height('20%');

​

​

      // set the title of the chart

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

​

      // set the container id for the chart

      chart.container('container');

​

      // initiate the chart drawing

      chart.draw();

    }

  );

});

​