JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<SELECT id="list">
<OPTION VALUE="A">Data Set A</option>
<OPTION VALUE="B">Data Set B</option>
<OPTION VALUE="C">Data Set C</option>
<OPTION VALUE="D">Data Set D</option>
</SELECT>
<div id="container" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
JavaScript
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
series: [{name: 'A', data: [1,2,3,2,1]}]
};
var chart = new Highcharts.Chart(options);
var options = {
chart: {
renderTo: 'container1',
defaultSeriesType: 'spline'
},
series: [{name: 'A', data: [1,2,3,2,1]}]
};
var chart1 = new Highcharts.Chart(options);
$("#list").on('change', function(){
//alert('f')
var selVal = $("#list").val();
if(selVal == "A" || selVal == '')
{
chart.series[0].setData([1,2,3,2,1]);
chart1.series[0].setData([1,2,3,2,1]);
}
else if(selVal == "B")
{
chart.series[0].setData([3,2,1,2,3]);
chart1.series[0].setData([3,2,1,2,3]);
}
else if(selVal == "C")
{
chart.series[0].setData([5,4,8,7,6]);
chart1.series[0].setData([5,4,8,7,6]);
}
else
{
chart.series[0].setData([4,7,9,6,2]);
chart1.series[0].setData([4,7,9,6,2]);
}
});