JSFiddle - React, Tailwind, and code Playground

by mlmason

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>

JavaScript

$(function () {
  Highcharts.setOptions({
		lang: {
			thousandsSep: ','
		}
	});
    $('#container').highcharts({
        title: {
            text: 'Violent Crime per 100,000 Individuals',
            x: -20 //center
        },
        subtitle: {
            text: 'FBI Crime Data',
            x: -20
        },
        xAxis: {
            categories: ['1960', '1965', '1970', '1975', '1980', '1985',
                '1990', '1995', '2000', '2005', '2010', '2014']
        },
        yAxis: {
            title: {
                text: 'Violent Crime per 100,000 people'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
                       headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span> <b>{point.y:,.0f}</b> '
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Detroit',
            data: [569, 600, 1919, 2358, 2210, 2375, 2699, 2408, 2324, 2358, 2378, 1987]
        },  {
            name: 'Boston',
            data: [198, 331, 849, 2252, 2848, 2074, 2379, 1737, 1243, 1318, 942, 726]
        }, 
       {name: 'Chicago',
       data: [null, 297, 1110, 2039, 2090, 1889, 2842, 2550, 1606, 1196, 1054, 884 ]},
    
       {
       name: 'Cleveland',
       data: [230, 387, 1060, 2047, 2792, 1205,1818, 1646, 1263, 1401, 1393, 1334]
       },
      
  
    
       {
       name: 'Houston',
       data: [271, 368, 806, 1040, 1232, 943, 1388, 1283, 1100, 1172, 1071, 991]
       },
       {
       name: 'Indianapolis',
       data: [177, 338, 695, 1007, 757, 980, 1287, 1526, 862, 993, 1160, 1255] 
       },
   
       {
       name: 'Los Angeles',
       data: [608, 693, 1068, 1541, 2183, 1658, 2404,...