JSFiddle - React, Tailwind, and code Playground

by whoamiwho

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<body  style="height: 480px;width:500px;margin:0px;padding:0px;background-color:transparent;background-image:url(http://fc08.deviantart.net/fs70/f/2014/016/5/3/pattern_by_skyrbe-d72ewfl.png);background-repeat:repeat">
        <div id="main" style="height: 480px;width:500px;margin:0px;padding:0px">
            <div id="container" style="height: 480px;width:320px;margin:0px;padding:0px"></div>
        </div>
    </body>

JavaScript

Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        /*function updateData(x,y)
        {
            var series = chart.series[0];
            series.addPoint([x, y], true, true);
        }*/
var chart;

$(function () {
    var color = '#AA34FF';
    
    $('#container').highcharts({
        chart: {
            events: {
                load: function(event) {
                    _bindCustomEvents();
                }
            },
            backgroundColor: 'transparent'        
        },
        
        series: [
            {
                color: 
                {
                    linearGradient: 
                    {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: 
                    [
                        /*[0, '#a83e3e'],
                                [0.21, '#d34e47'],
                                [0.40, '#edbb5a'],
                                [0.57, '#e2e57a'],
                                [0.76, '#8dcc63'],
                                [1, '#7ab237']*/
                                [0, '#7ab237'],
                                [0.21, '#8dcc63'],
                                [0.40, '#e2e57a'],
                                [0.57, '#edbb5a'],
                                [0.76, '#d34e47'],
                                [1, '#a83e3e']
                            ]
                        },
                        lineWidth: 4,
                        marker: {
                            enabled: false,
                            fillColor: '#FFFFFF',
                            lineWidth: 2,
                            lineColor: null,
                        },
                        type: 'spline',
                        data: [1, 2, 5, 3, 6, 7, 4],
                        backgroundColor: 'transparent',
                     ...