JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<button onclick="buttonClick()">Change Value</button>
<input type="text" id="inc" value="">
<button id="add">Draw new value</button>

<div class="container">
<div id="test" class="width__full"></div>
</div>

<a href="https://docs.google.com/spreadsheets/d/1JT4O9KUMf_10zFY39XdddqLd2C_lH4aUeHjhouBKEvw/edit#gid=0">Link to data sheet</a>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

JavaScript

var col_1_light = '#cadedc'
var col_1_dark = '#437c75'

var value = 1

function buttonClick() {
        document.getElementById('inc').value = ++value;
        chart10.update({chart: {type: 'area'}});
    }
    
var button = document.getElementById('add');
button.onclick = function() {
  button.focus();

  chart10.update({
    data: {
      endColumn: value
    }
  });
};



let chart10 = Highcharts.chart('test', {
  data: {  
    googleSpreadsheetKey: '1JT4O9KUMf_10zFY39XdddqLd2C_lH4aUeHjhouBKEvw',
    googleSpreadsheetWorksheet: 1,
    dateFormat: 'dd.mm.yyyy',
    startColumn: 0,
    endColumn: value + 1,
    startRow: 0,
    endRow: 10,
    parsed: function() {
      this.columns.splice(1, value)
    },
    itemDelimiter: ';',
    lineDelimiter: '\n',
    decimalPoint: ','
  },
  chart: {
    type: 'area',
  },
  xAxis: {
    reversed: false,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 * 365,
    min: Date.UTC(2021, 06, 01),
    labels: {
      enabled: true,
    }
  },
  yAxis: {
    plotLines: [{
      value: 2.5,
      color: col_1_dark,
      dashStyle: 'ShortDash',
      width: 1
    }],
    reversed: false,
    title: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Test',
    style: {
      color: col_1_dark,
      fontWeight: 'bold',
      fontFamily: 'Helvetica, Clean, sans-serif'
    }
  },
  plotOptions: {
    area: {
      step: 'center',
      stacking: 'normal',
      fillColor: col_1_light,
      lineWidth: 2
    },
    series: {
      color: col_1_dark,
      centerInCategory: true,
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: false
          }
        }
      },
      duration: 2000,
      states: {
        hover: {
          duration: 2000,
          lineWidth: 2.5
        },
      }
    }
  },
  exporting: {
    enabled: false,
    buttons: {
      exportButton: {
        enabled: false
      }
    }
  },
  credits: {
    enabled:...