График HighCharts перезагружается при начальной загрузке

Question

У меня есть куча HighCharts, запускающих данные из Google Sheets, и некоторые из них сначала визуализируют область графика, а затем продолжают загружать данные на диаграмме, и я не могу понять, почему. Это просто HighCharts или я могу что-то исправить?

Это то, что происходит https://youtu.be/ddM-WxCAczM

Это Google Sheet, который я загружаю в облако HighCharts https://docs.google.com/spreadsheets/d/e/2PACX-1vSQEXUaZFqT3Oatl3AK8S-bqq6vNs5vDjoG2puaFvQ7LsSGB5dIaBk0Kp2aHWE2lbFEms9gZ6r36TTQ/pubhtml

Вот пользовательский код, который я применяю в облаке HighCharts, чтобы отобразить диаграмму так, как мне нужно:

Highcharts.merge(true, options, {
  chart: {
    height: 445,
    marginTop: 70,
    spacingBottom:-100,
    style: {
      fontFamily: '"Trebuchet MS","Trebuchet","Helvetica","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif',
    },
    events: {
      load: function () {
        this.update({
          exporting: {
            filename: this.options.title.text,
          }
        });
      }
    },
    plotBorderColorLeft: '#ccc',
    plotBorderWidth: 0,
    backgroundColor: {
      stops: [
        [1, 'rgb(255, 255, 255)'],
      ]
    }
  },
  plotOptions: {
    column: {
           pointPlacement: 'between'
        },
    series: {
      marker: {
      enabled: false,
      },
      cursor: 'arrow'
    }
  },
  yAxis: {
    plotLines: [{
      color: '#010101',
      width: 2,
      value: 0,
      zIndex: 5
    }],
    lineWidth: 1.5,
    gridLineWidth: 0,
    lineColor: '#010101',
    tickWidth: 1.5,
    tickLength: 4,
    tickColor: '#010101',
    title: {
      align: 'high',
      offset: -10,
      text: '(%)',
      rotation: 0,
      y: -12,
      style: {
        fontSize: '14px'
      },
    },
    labels: {
      enabled: true,
      style: {
        fontSize: '13px'
      }
    },
    startOnTick: true,
    endOnTick: true,
    tickInterval: 1,
    tickPosition: 'inside',
    tickmarkPlacement: 'on',
  },
  xAxis: {
    title: {
      text: 'Date',
      style: {
        display: 'none'
      }
    },
    offset:-127,
    useHTML: true,
    labels: {
      enabled: true,
      rotation: -90,
      x: 14,
      style: {
        fontSize: '16px'
      },
    y:160
    },
    lineWidth:2,
    lineColor: '#010101',
    tickWidth:2,
    tickPosition: 'inside',
    tickLength:4,
    tickColor: '#010101',
    tickmarkPlacement: 'on',
    startOnTick: false,
    endOnTick: false,
    min:.0,
    max:40.4
  },
  credits: {
    enabled:false
  },
  legend: {
    symbolRadius: 0,
    floating:true,
    itemStyle: {
      font: '14px Trebuchet MS, Trebuchet, "Helvetica", Verdana, sans-serif',
      color: '#010101'
    },
    itemMarginTop: 5,
    floating: true,
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    enabled: true,
    x: 50,
    y: 15
  },
  subtitle: {
    style: {
      display: 'none'
    },
    y: 0
  },
  title: {
    style: {
      display: 'none'
    },
    y: 0
  },
  tooltip: {
    valueSuffix: '%'
  },
  exporting: {
    buttons: {
      contextButton: {
      enabled: true,
      y:-10,
      x:10,
      text: 'Download',
      menuItems: [
        "printChart",
        "separator",
        "downloadPNG",
        "downloadJPEG",
        "downloadPDF",
        "downloadSVG",
        "separator",
        "downloadCSV",
        "downloadXLS",
          {
            textKey: 'viewData',
            text: 'Toggle data table',
            onclick: function() {
              if (this.dataTableDiv && this.dataTableDiv.style.display !== 'none') {
                this.dataTableDiv.style.display = 'none';
              } else {
                this.viewData();
                this.dataTableDiv.style.display = '';
              }
            }
          }
        ]
      }
    }
  }
});