JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
SplineSeries = Highcharts.seriesTypes.spline;
function stop(el) {
$(el).stop();
}
SplineSeries.prototype.drawGraph = function () {
var series = this,
options = series.options,
chart = series.chart,
graph = series.graph,
graphPath = [],
group = series.group,
color = options.lineColor || series.color,
lineWidth = options.lineWidth,
dashStyle = options.dashStyle,
segmentPath,
renderer = chart.renderer,
singlePoints = [], // used in drawTracker
attribs,
arrowLength = 15,
arrowWidth = 8,
path = [],
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));
// divide into segments and build graph and area paths
$.each(series.segments, function (i, segment) {
segmentPath = series.getSegmentPath(segment);
// add the segment to the graph, or a single point for tracking
if (segment.length > 1) {
graphPath = graphPath.concat(segmentPath);
} else {
singlePoints.push(segment[0]);
}
});
// used in drawTracker:
series.graphPath = graphPath;
series.singlePoints = singlePoints;
path.push(
'M',
lastPoint.plotX, lastPoint.plotY,
'L',
lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY -...