JSFiddle - React, Tailwind, and code Playground

by jlbriggs

HTML

<script src="http://geodev.grid.unep.ch/etc/js/Highcharts-3/js/highcharts.js"></script>

<div id="container" style="height: 550px"></div>

JavaScript

$(function () {
    $('#container').highcharts({
            chart:
				{
					renderTo: "container",
					type: "line",
				},
				title: 
				{
					text: "Amphibians - Number of Threatened Species",
					align: "center",
				},
				xAxis: 
				{
					//categories: ['1996','2000','2002','2003','2004','2005'], 
					labels:
					{
						//step: 1
					},
					tickWidth: 0,
		            type: "datetime"
				},
				yAxis: 
				{
					title: 
					{
						text: "Number of Threatened Species",
						align: "high"
					},
					min: 0
				},
				tooltip:
				{
					shared: true,
					crosshairs: true
				},
				plotOptions:
				{
					series:
					{
						connectNulls: true,
						shadow: false,
						lineWidth: 2
					}
				},
				series: 
				[	{
							data: [[820472400000,124],
                                   [946702800000,146],
                                   [1009861200000,157],
                                   [1041397200000,157],
                                   [1072933200000,1770],
                                   [1104555600000,1811]],
							name: "Global"
						}]
			});
});