JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

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

<div id="container"></div>
<button id="toggle">toggle theme</button>

JavaScript

function createChart(chartOptions) {
 return new Highcharts.Chart('container', chartOptions);
}

function resetOptions() {	
	Highcharts.setOptions(initialOptions)
}

function toggleTheme() {
	const theme = flag ? theme2 : theme1
	flag = !flag;
	
	chart.destroy()
	resetOptions();
	
	Highcharts.setOptions(theme);
	chart = createChart(chartOptions);
}

let flag = true;

const chartOptions = {
  series: [{
    data: [4, 3, 5, 6, 2, 3]
  }]
}

const theme1 = {
  colors: ['red'],
  chart: {
    backgroundColor: 'gray',
  },
};

const theme2 = {
  colors: ['blue'],
};

const initialOptions = JSON.parse(JSON.stringify(Highcharts.getOptions()));
Highcharts.setOptions(theme1);
let chart = createChart(chartOptions);


document.getElementById('toggle').addEventListener('click', () => {
	toggleTheme();
})