JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

<script src="http://www.highcharts.com/js/highcharts.js"></script>
   


        
    <div id="chart-1" style="width:250px; height:150px"></div>
    <button type="button" id="button-1" onclick="updateCharts()">Update chart</button>

JavaScript

$(document).ready(function () {
    createCharts();
});
// global vars
        col1 = '#7B7B7B';                   
        col2 = '#FFFFFF';   

        // Set chart options
        Highcharts.setOptions({
            chart: { defaultSeriesType: 'column', backgroundColor: "rgba(0,0,0)" },
            plotOptions: { column:{ stacking: 'normal' }},                
            title: { text: ''},
            legend: {enabled: false}                
            });
// Initialize charts
function createCharts(){
            chart1 = new Highcharts.Chart({
                chart: {    renderTo: 'chart-1' },
                xAxis: {    categories: ['now.', 'then.']   },
                yAxis: {    title: {style: {color: '#FFFFFF'},
                            text: '[Total Amount]'          },                  
                                min: 0  },
                series: [{name: 'Measure_A',      data: [0, 0], pointWidth: 28}, 
                         {name: 'Measure_B', data: [0, 0], pointWidth: 28}]
                });
                }

       // update charts 
        function updateCharts(){

            old_A =  chart1.series[0].data[0].y;
            old_B =  chart1.series[1].data[0].y;

            A = Math.random() * 10;
            B = Math.random() * 10;

            chart1.series[0].setData([{color: col1, name: 'Measure_A',   y: A,     pointWidth: 28},
                          {color: col2, name: 'Measure_A',   y: old_A, pointWidth: 28}]);
            chart1.series[1].setData([{color: col1, name: 'Measure_B',   y: B,     pointWidth: 28}, 
                          {color: col2, name: 'Measure_B',   y: old_B, pointWidth: 28}]);}