guybrush/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>apexcharts-issues</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  <div id="chart"></div>
  <button id="addSeries">add series</button>
  <button id="rmSeries">remove series</button>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script>
    var options = {
      chart: {
        height: 350,
        type: 'line',
        zoom: { enabled: false },
        animations: {enabled: false},
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
          curve: 'straight'
      },
      series: [ { name: "Desktops", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] } ],
      title: {
        text: 'Product Trends by Month',
        align: 'left'
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      }
    }

    var chart = new ApexCharts(document.querySelector("#chart"),options);
    let iSeries = 0
    for (let i=0;i<10;i++) addSeries()
    chart.render()
    document.querySelector('#addSeries').addEventListener('click', function(){
        addSeries()
        chart.updateOptions(options)
    })
    document.querySelector('#rmSeries').addEventListener('click', function(){
        rmSeries()
        chart.updateOptions(options)
    })
    function addSeries() {
        let s = { name: "series-asdf-asdf-"+(iSeries++), data: [] }
        for (let i=0;i<9;i++) s.data.push(Math.floor(Math.random() * Math.floor(200)))
        options.series.push(s)
    }
    function rmSeries() {
        options.series.pop()
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>apexcharts-issues</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	</head>
	<body>
	<div id="chart"></div>
	<button id="addSeries">add series</button>
	<button id="rmSeries">remove series</button>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
	<script>
	var options = {
	chart: {
	height: 350,
	type: 'line',
	zoom: { enabled: false },
	animations: {enabled: false},
	},
	dataLabels: {
	enabled: false
	},
	stroke: {
	curve: 'straight'
	},
	series: [ { name: "Desktops", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] } ],
	title: {
	text: 'Product Trends by Month',
	align: 'left'
	},
	grid: {
	row: {
	colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
	opacity: 0.5
	},
	},
	xaxis: {
	categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
	}
	}

	var chart = new ApexCharts(document.querySelector("#chart"),options);
	let iSeries = 0
	for (let i=0;i<10;i++) addSeries()
	chart.render()
	document.querySelector('#addSeries').addEventListener('click', function(){
	addSeries()
	chart.updateOptions(options)
	})
	document.querySelector('#rmSeries').addEventListener('click', function(){
	rmSeries()
	chart.updateOptions(options)
	})
	function addSeries() {
	let s = { name: "series-asdf-asdf-"+(iSeries++), data: [] }
	for (let i=0;i<9;i++) s.data.push(Math.floor(Math.random() * Math.floor(200)))
	options.series.push(s)
	}
	function rmSeries() {
	options.series.pop()
	}
	</script>
	</body>
	</html>