JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/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 lineSeries = Highcharts.seriesTypes.line;
var datas = [ {
data: [[-0.141739258,0.36771843],
[0.083459661,0.451178092],
[0.51202565,0.963203742],
[0.612026169,1.57522991]],
marker: {
enabled: false
}
},{
data: [[0.10391336,-0.647706317],
[0.208684058,-0.439022259],
[0.031920245,-0.407102014],
[-0.280249839,-0.687351853]],
marker: {
enabled: false
}
},{
data: [[-0.162661787,0.054789161],
[-0.515201342,-0.460412181],
[-0.012798465,-0.473210646],
[0.518541583,0.045330936]],
marker: {
enabled: false
}
},{
data: [[-0.102162743,0.090990921],
[-0.073324159,0.017666762],
[0.047597244,0.065264006],
[0.098823319,0.164087324]],
marker: {
enabled: false
}
}];
for(var d = 0; d<datas.length; d++){
datas[d].data.sort(function(a,b){
return a[0] > b[0];
});
}
var lineDrawGraph = lineSeries.prototype.drawGraph;
lineSeries.prototype.drawGraph = function() {
var arrowLength = 15,
arrowWidth = 9,
series = this,
segments = series.linedata || 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)),
path = [];
angle = Math.PI+angle;
lineDrawGraph.apply(series, arguments);
path.push('M', lastPoint.plotX, lastPoint.plotY);
path.push(
'L',
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX + arrowLength *...