JSFiddle - React, Tailwind, and code Playground

by christauff

HTML

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

<div id="fig1" style="height: 400px"></div>
<p><a href='#' id='get_pettop_total'>Set new data1</a></p>
<p><a href='#' id='get_petcop_total'>Set back data</a></p>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'fig1'
        },
        series: [{
            data: []        
        }]
    });
    
    
    // click on sparkline and load new series data
    $('#get_pettop_total').click(function() {
      chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 100.6, 54.4, 29.9, 71.5, 106.4]);
      chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
      chart.setTitle({ text: 'get_pettop_total'});
      });
    
    $('#get_petcop_total').click(function() {
      chart.series[0].setData([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]);
	  chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
      chart.setTitle({ text: 'get_petcop_total'});
      chart.yAxis[0].setTitle({ text: '#petroleum_std_unit#' });
        chart.series[0].name='#petroleum_std_unit#';
      });
});