JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<button id="testbutton">Change Source</button>

<div id="container"></div>
<button id="btn1">Click to show the first series</button>
<button id="btn2">Click to show the second series</button>
<button id="btn3">Click to show the third series</button>

<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/modules/data.js"></script>

JavaScript

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

var value = 0

var series1,
  series2,
  series3;

var button = document.getElementById('testbutton');
	button.onclick = function() {
	var value = 1;
  console.log(value);
  chart10.update({
    data: {
      endColumn: value,
      parsed: function() {
      		this.columns.splice(1, value)
    	},
    }
  });
};




let chart10 = Highcharts.chart('test', {
  data: {
    googleSpreadsheetKey: '1JT4O9KUMf_10zFY39XdddqLd2C_lH4aUeHjhouBKEvw',
    
        complete: function(options) {
      // copy without reference
      series1 = Highcharts.merge(options.series[0]);
      series2 = Highcharts.merge(options.series[1]);
      series3 = Highcharts.merge(options.series[2]);

      options.series = [options.series[0]];
    },
    
    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
          }
        }
 ...