JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

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

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        
        SplineSeries = Highcharts.seriesTypes.spline;
     splineDrawLine = SplineSeries.prototype.drawLine;
     
     SplineSeries.prototype.drawLine = function() {
 
         var arrowLength = 15,
         arrowWidth = 8,
         series = this,
         segments = series.splinedata || series.segments,
         lastSeg = segments[segments.length - 1],
         lastPoint = lastSeg[lastSeg.length - 1],
         nextLastPoint = lastSeg[lastSeg.length - 2],
         angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
         (lastPoint.plotY - nextLastPoint.plotY)),
         layer = series.stateLayers[''],
         path = [];
 
         if (angle < 0) angle = Math.PI + angle;
 
         // call the original method
         splineDrawLine.apply(series, arguments);
 
 
         // last point
         path.push(lastPoint.plotX, lastPoint.plotY);
         path.push(
         lastPoint.plotX + arrowWidth * Math.cos(angle),
         lastPoint.plotY - arrowWidth * Math.sin(angle)
         );
         path.push(
         lastPoint.plotX + arrowLength * Math.sin(angle),
         lastPoint.plotY + arrowLength * Math.cos(angle)
         );
         path.push(
         lastPoint.plotX - arrowWidth * Math.cos(angle),
         lastPoint.plotY + arrowWidth * Math.sin(angle)
         );
 
         layer.drawPolyLine(path, series.color, 0, false, series.color);
 
     };
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline'
            },
            title: {
                text: 'Wind speed during two days'
            },
            subtitle: {
                text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Wind speed (m/s)'
               ...