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

    });

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

  });

});