JSFiddle - React, Tailwind, and code Playground

by mark47

HTML

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

<br /><br />
<div id="container" style="width: 800px; height: 400px; margin: 0 auto; background-color: #f5f5f5"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Dolor',
                x: -20 //center
            },
            exporting: {
                enabled: false             
            },
            subtitle: {
                text: '',
                x: -20
            },
            legend: {
                enabled: false
            },
            xAxis: {
                categories: ['7/15/2012','8/15/2012','9/15/2012','10/15/2012']
            },
            yAxis: { // Primary yAxis
                labels: {
                    style: {
                        color: '#9ea58e'
                    }
            },
                title: {
                    text: '<br>Peor<br><span style="color: white; ">|</span><br><span style="color: white; ">|</span><br><span style="color: white; ">|</span><br><span style="color: white; ">|</span><br><span style="color: white; ">|</span><br>Mejor',
                    style: {
                        color: '#9ea58e',
                        backgroundColor: '#fff',
                        fontSize: '13px',
                        lineHeight: '36px'
                    },
                        margin: 30,
                        rotation: 0,
                        align: 'high'
                },
                min: 0,
                max: 100,                                    
                plotBands: [{
                    color: '#ffd9d9',
                    from: 49,
                    to: 100                
                }],
                endOnTick: true,
                startOnTick: true,
                showLastLabel: true,
                showFirstLabel: true,
                tickPixelInterval: 50
            },
           ...