JSFiddle - React, Tailwind, and code Playground

by wergeld

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<select id="chartType">
    <option value="line">line</option>
    <option value="column">column</option>
    <option value="point">point</option>
    <option value="bar">bar</option>
</select>
<div id="chartDist_container" style="height: 400px"></div>

JavaScript

function changeType(chart, series, newType) {
        for (var i = 0; i < series.length; i++) {
            series = series[0];
            try {
                series.chart.addSeries({
                    type: newType,
                    name: series.name,
                    color: series.color,
                    data: series.options.data
                },
                false);
                series.remove();
            } catch (e) {
                alert(e);
            }
        }
    }

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chartDist;
$(document).ready(function() {
    chartDist = new Highcharts.Chart({
        chart: {
            renderTo: 'chartDist_container',
            height: 900,
            resetZoomButton: {
                position: {
                    align: 'right',
                    verticalAlign: 'top',
                    x: 0,
                    y: -30
                }
            },
            width: 450,
            zoomType: 'x'
        },
        legend: {
            enabled: false,
            layout: 'horizontal'
        },
        plotOptions: {
            bar: {
                stacking: 'normal'
            },
            series: {
                shadow: true
            },
            spline: {
                marker: {
                    enabled: false
                }
            }
        },
        title: {
            text: 'Annual Unemployment Rate'
        },
        tooltip: {
            formatter: function() {
                var s = '<b>' + this.x + '</b>';
                $.each(this.points, function(i, point) {
                    s += '<br/>' + point.series.name + ': ';
                    if (point.series.name == 'Unemployment Rate (%)') {
                        s += point.y;
                    } else {
                        s += Highcharts.numberFormat(point.y, 0, ',');
               ...