JSFiddle - React, Tailwind, and code Playground

by jbenedict

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

7.68
7.6
7.84
6.95
7.55
7.85
8.03
8.06
7.42

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Indiana Infant Mortality Rates by Race',
            x: -20 //center
        },
        subtitle: {
            text: 'Indiana State Department of Health',
            x: -20
        },
        xAxis: {
            categories: ['2003', '2004', '2005', '2006', '2007', '2008',
                '2009', '2010', '2011', '2012']
        },
        yAxis: {
            title: {
                text: ' Deaths per 1000 births'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: 'per 1000 live births'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [
             {                
            name: 'Indiana',
            data: [7.42, 8.06, 8.03, 7.85, 7.55, 6.95, 7.84, 7.6, 7.68]
        },
            {
            name: 'White',
            data: [6.4, 6.9, 6.9, 6.4, 6.5, 5.5, 6.4, 6, 6.9]
        }, {
            name: 'Black',
            data: [15.9, 17.1, 16.9, 18.1, 15.7, 14.9, 16.1, 14.7, 12.3]
        }, {
            name: 'Hispanic',
            data: [7.6, 7.4, 8.1, 8, 7.9, 7.5, 6.9, 7.8, 6.5]
        }]
    });
});