Highstock remove series button

adding a series and button to remove the series in legend

by Bryan McIntosh

HTML

<div id="container"></div>

<button id="button">Add series</button>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

CSS

#container {
    height: 400px;
    min-width: 600px;
}

JavaScript

function fnRemove(series){
	series.remove();
}
const chart = Highcharts.stockChart('container', {
    rangeSelector: {
        selected: 1
    },
    plotOptions: {
      series: {
        showInLegend: true,
        events: {
          afterAnimate: function() {
            if (this.legendItem) {
            console.log(this.legendItem.element.children);
              const btns = this.legendItem.element.children;
              btns[0].addEventListener('click', () => fnRemove(this));
            }
          }//,
          //legendItemClick: function() {
          //  return false;
          //}
        }
      }
    },
		legend: {
      enabled: true,
      useHTML: true,
      labelFormatter: function() {
        return this.name + ' <button>x</button>';
      }
    },
    series: [{
        name: 'MSFT',
        data: MSFT
    }]
});

// activate the button
document.getElementById('button').addEventListener('click', e => {
    chart.addSeries({
        name: 'ADBE',
        data: ADBE
    });

    e.target.disabled = true;
});