const chart = new Highcharts.stockChart('container', {

    chart: {
      events: {
        load() {
          let chart = this;
          //let cdata = []


          (function() {
            fetch('https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1m&limit=1000')
              .then(res => res.json())
              .then(data => {

                let cdata = data.map(d => {
                  return [d[0], parseFloat(d[1]), parseFloat(d[2]), parseFloat(d[3]), parseFloat(d[4])]
                  //{time:d[0]/1000,open:parseFloat(d[1]),high:parseFloat(d[2]),low:parseFloat(d[3]),close:parseFloat(d[4])}

                });
                console.log(cdata)
                chart.series[0].update({
                  data: cdata
                })

              })
          }())

        }
      }
    },

    plotOptions: {
      candlestick: {
        lineColor: "#333",
        color: '#e55600',
        upColor: '#690'
      }
    },
    xAxis: [{
      crosshair: true,
      width: '100%'
    }],
    yAxis: {
      crosshair: true
    },

    navigation: {
      bindings: {
        rect: {
          annotationOptions: {
            ShapeOptions: {
              fill: 'rgba(255,0,0,0.8)'
            }

          }

        }

      },

      annotationOptions: {
        typeOptions: {
          line: {
            stroke: 'rgba(0,255,0,0.8)',
            strokeWidth: 3
          }


        }

      }
    },

    rangeSelector: {
      selected: 1
    },

    series: [{
      type: 'ohlc',
      name: "BTCUSDT",
      id: 'dataseries',
      groupPadding: 0.03,
      pointPadding: 0.03,
      _dataGrouping: {
        units: [
          [
            'week', // unit name
            [0] // allowed multiples
          ]
        ]
      }

    }, {
            type: 'flags',
            data: [{
                 x: Date.UTC(2021, 9, 13, 20, 55, 29),
                title: 'C',
                text: 'Shape: "flag"'
            }, {
                 x: Date.UTC(2021, 9, 13, 21, 55, 59),
                title: 'C',
                text: 'Shape: "flag"'
            }],
            color: Highcharts.getOptions().colors[0], // same as onSeries
            fillColor: Highcharts.getOptions().colors[0],
            onSeries: 'dataseries',
            width: 16,
            style: { // text style
                color: 'white'
            },
            states: {
                hover: {
                    fillColor: '#395C84' // darker
                }
            }
        }
    
    
    
    ]
  });