JSFiddle - React, Tailwind, and code Playground

by adamtsiopani

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
    height: 500px; min-width: 500px;
}

.chart-title {
    color: #003466;
    font-size: 36px;
}

.cymbio-logo {
   float: left;
   margin-right: 15px;
   width: 50px;
   height: 48px;
   background-size: contain; 
   background: url(http://www.cymbio.co.uk/images/logo.gif) 0 0 no-repeat;
}

JavaScript

$(function () {

    var Cymbio = Cymbio || {};
    Cymbio.config = {
        baseline: 10
    };
        
    // Create the chart
    $('#container').highcharts('StockChart', {

        title: {
            text: '<div class="cymbio-logo"></div><div class="chart-title">KPN Year View</div>',
            useHTML: true,
            align: 'left',
            margin: 50
        },

        yAxis: {
            plotLines: [{
                label: {
                    text: 'Baseline',
                    x: 25
                },
                color: 'orange',
                width: 2,
                value: Cymbio.config.baseline,
                dashStyle: 'longdashdot'
            }]
        },
        
        rangeSelector: {
            selected: 1
        },

        credits: {
            enabled: false
        },
       
        tooltip: {
           formatter: function() {
               var that = this;
               var s = this.x;
                $.each(this.points, function(i, point) {
                    var point_color = 'red';
                    if(point.y > Cymbio.config.baseline) {
                        point_color = 'green';
                    }
                   
                    s += '<br/><span style="color:'+point_color+'">' +
                        '<b>'+ point.series.name +':</b></span> '+
                        point.y;
                });
                
                return s;
            },
            shared: true
        },
        
        series: [{
            name: 'KPN12345',
            threshold: Cymbio.config.baseline,
            negativeColor: 'green',
            color: 'red',
            tooltip: {
                valueDecimals: 2
            },
            data: [
                [1327881600000, 11],
                [1327968000000, 18],
                [1328054400000, 12],
                [1328140800000, 5],
                [1328227200000, 11],
                [1328486400000, 17],
               ...