JSFiddle - React, Tailwind, and code Playground

by Raul Corona Xolaltenco

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button type="button" onClick="addPoint();">Click Me!</button>

JavaScript

$(function () {
  
  
  var options = {
        chart: {
            type: 'area',
            renderTo : 'container'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
    	xAxis: {/*correspinde a etiquetas debajo de graficas*/
	      lineColor: '#6e6e6e',
	      type :'datetime',
         tickInterval:60000,
	/*	      tickInterval : 240000 * 60 *1,*/
	     /* tickPixelInterval: 100,*/
	      	dateTimeLabelFormats: {
	      		day:'%H:%M'
	      	},
	      	
			labels: {
	          style: {
	          	fontSize: '9px',
	          	color: '#000',
	          	fontFamily: 'Gill Sans'
				},	
	          enabled: true
	      }, 
			
		},
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                //pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: []
        }, {
            name:...