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: 'Population, 1995-2015',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: US Census Bureau',
            x: -20
        },
        xAxis: {
            categories: ['1995', '2000', '2005', '2010', '2015',]
        },
        yAxis: {
            title: {
                text: 'Population'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Buffalo',
            data: [313088, 292210, 277998, 261130, 258071]
        }, {
            name: 'Chicago',
            data: [2749811, 2896016, 2873441, 2695598, 2720546]
        }, {
            name: 'Cleveland',
            data: [501228, 476574, 449188, 396009, 388072]
        }, {
            name: 'Detroit',
            data: [997297, 951270, 900932, 713777, 677116]
        },
        {
        name: 'St. Louis',
        data: [368822, 346904, 352572, 319257, 315685]
        }]
    });
});