JSFiddle - React, Tailwind, and code Playground

by supergg

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="top10_" style="float:left">
   <button id="set_column">column</button>
   <button id="set_bar">bar</button>
   <button id="set_pie">pie</button>
</div>
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>

JavaScript

$('#set_column').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "column"});
});
$('#set_bar').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "bar"});
});
$('#set_pie').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "pie"});
});

$('#top10').highcharts({
    chart: {
        type: 'column',
        margin: [ 50, 50, 100, 80]
    },
    title: {
        text: 'TOP10'
    },
    subtitle: {
        text: ' '
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['1','2','3','4'],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
    yAxis: {
        min: 0,
            title: {
                text: 'Ilość'
            }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                'Ilość: '+ this.y;
        }
    },
    series: [{
        name: 'Ilość zgłoszeń, TOP10',
        data: [1,2,3,43],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            x: 4,
            y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
        }
    }]
});

function ajax_update(date) {
    $.ajax({
        url: "index.php/ajax",
        async: false,
        method: 'post',
        dataType: "json",
        data: {date:date},
        beforeSend: function(){
...