JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<script src="http://code.highcharts.com/3.0.0/highcharts.js"></script>
<script src="http://code.highcharts.com/3.0.0/highcharts-more.js"></script>
<div id="container" style="height: 300px"></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 = chart.series[0]
                     var newType = series.type == $('#ChType').val() ? $('#ChType').val() : $('#ChType').val();
                         changeType(series, newType);
                   })
$('#ChType2').change(function(){
                     var series = chart.series[1]
                     var newType = series.type == $('#ChType2').val() ? $('#ChType2').val() : $('#ChType2').val();
                         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: 'datetime',
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%a %d %b %H:%M', this.value);
                },
                dateTimeLabelFormats: {
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%e. %b',
                    week: '%e. %b',
                    month: '%b \'%y',
                    year: '%Y'
                }
            }
        },
        series: [{
            name: 'MyData1',
            data: []
        }, {
            name: 'MyData2',
            data: []
        }]

    });

    chart.series[0].setData([
        [Date.UTC(2013, 0, 1, 08, 00), 4.4],
    ...