JSFiddle - React, Tailwind, and code Playground

by Cayce Balara

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>

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Planned Parenthood Federation of America:',
            x: -20 //center
        },
        subtitle: {
            text: '(calculated straight-line values based on 2006 & 2013 actuals)',
            x: -20
        },
        xAxis: {
            categories: ['2006', '2007', '2008', '2009', '2010', '2011',
                '2012', '2013']
        },
        yAxis: {
            title: {
                text: 'Procedures'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        series: [{
            name: 'Abortions',
            color: '#b22222',
            data: [289750.0, 295071.4, 300392.9, 305714.3, 311035.7, 316357.1, 321678.6, 327000]
        }, {
            name: 'Cancer Screening & Prevention Services',
            color: '#FF69B4',
            data: [2007371, 1854257, 1701143, 1548029, 1394915, 1241801, 1088687, 935573]
        }]
    });
});