JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<select id="ChType">
<option value="line">line</option>
<option value="column">column</option>
</select>
<select id="ChType2">
<option value="line">line</option>
<option value="column">column</option>
</select>
JavaScript
$('#ChType').change(function(){
var series;
for ( i = 0 ; i < chart.series.length ; i++ ) {
if ( chart.series[i].name == 'MyData1' ) {
series = chart.series[i];
}
}
//var series = chart.series[0]
var newType = series.type == $('#ChType').val() ? $('#ChType').val() : $('#ChType').val();
newType = newType.toLowerCase();//testing
changeType(series, newType);
})
$('#ChType2').change(function(){
var series;
for ( i = 0 ; i < chart.series.length ; i++ ) {
if ( chart.series[i].name == 'MyData2' ) {
series = chart.series[i];
}
}
var newType = series.type == $('#ChType2').val() ? $('#ChType2').val() : $('#ChType2').val();
newType = newType.toLowerCase();//testing
changeType(series, newType);
})
function changeType(series, newType) {
var dataArray = [],
points = series.data;
series.chart.addSeries({
type: newType,
name: series.name,
color: series.color,
data: series.options.data
}, false);
series.remove();
}
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
yAxis: {
type: 'double',
min: 0
},
xAxis: {
type:...