JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        borderWidth: 0,
        borderRadius: 0,
        plotBorderColor: 'rgb(235,235,235)',
        plotBorderWidth: 1,
        plotBackgroundColor: null,
        plotShadow: false,
        shadow: false,
        style: {
            fontFamily: 'Helvetica, Arial, sans-serif',
            fontSize: '12px'
        },
        alignTicks: true,
        renderTo: 'container'
    },
    title: {
//        x: 0,
//        y: 25,
        text: 'This is the Chart Title',
        align: 'center',
        style: {
            color: 'black',
            font: 'bold 14px Helvetica, Arial, sans-serif'
        }
    },
    subtitle: {
//        x: 0,
//        y: 42,
        text: 'And this is the chart subtitle',
        align: 'center',
        style: {
            color: 'rgb(110,110,110)',
            font: '11px Helvetica, Arial, sans-serif'
        }
    },
    xAxis: {
        title: {
            style: {
                color: 'rgb(62,62,62)',
                font: 'bold 12px Helvetica, Arial, sans-serif'
            }                
        },
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                color: 'rgb(110,110,110)',
                font: 'bold 10px Helvetica, Arial, sans-serif'
            }
        },
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    yAxis: [{
        max: 225,
        min: 25,
        tickInterval: 25
    },
    {
        max: 225,
        min: 25,
        tickInterval: 25,
        opposite: true
    }],
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        yAxis: 1
    } , {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});