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 Uniform Crime Reporting Data 1960-2014',
            x: -20
        },
        xAxis: {
            categories: ['1960', '1965', '1970', '1975', '1980', '1985',
                '1990', '1995', '2000', '2005', '2010', '2014']
        },
        yAxis: {
            title: {
                text: 'Violent crime per 100,000 individuals'
            },
            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, 2378]
        },  {
            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: 'Cincinnati',
       data: [127, 234, 493, 1623, 2571, 885, 1229, 1290, 840, 1185, 1217, 902] },

    
       {
       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,...