JSFiddle - React, Tailwind, and code Playground

by Robodude

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set A + B
<OPTION VALUE="C">Data Set A + B + C       
</SELECT>
<button id="change">Change Data Source</button>

<div id="container" style="height: 400px"></div>

JavaScript

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    series: []
};

$("#change").click(function(){
if ($("#list").val() == "A")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]}]
}
else if ($("#list").val() == "B")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}]
} 
else if ($("#list").val() == "C")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}]
} 
    
    
var chart = new Highcharts.Chart(options);    
});