JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
JavaScript
(function (Highcharts){
Highcharts.Renderer.prototype.symbols.arrow = function(x,y,w,h,options){
var angle;
angle = options.angle; // angle for arrow
w = w/1.2;
x = x + h/2 - 2*w*Math.sin(angle);
y = y + h/2 - 2*w*Math.cos(angle);
h = w * 2;
return ['M',x,y,
'L',x + w*Math.cos(angle),y - w*Math.sin(angle),
x + h*Math.sin(angle),y + h*Math.cos(angle),
x - w*Math.cos(angle),y + w*Math.sin(angle),
'Z'];
};
Highcharts.Series.prototype.drawPoints = function(){
// re-define Highcharts globals
var UNDEFINED,
NORMAL_STATE = '',
SELECT_STATE = 'select';
var series = this,
pointAttr,
points = series.points,
chart = series.chart,
plotX,
plotY,
i,
l,
point,
radius,
symbol,
isImage,
theta,
lastPoint,
thisPoint,
graphic;
if (series.options.marker.enabled) {
i = points.length;
l = i;
while (i--) {
point = points[i];
plotX = point.plotX;
plotY = point.plotY;
graphic = point.graphic;
// only draw the point if y is defined
if (plotY !== UNDEFINED && !isNaN(plotY)){
if (i>0){ // orient the arrow in the forward direction
lastPoint = points[i-1];
thisPoint = points[i];
theta = Math.atan( (plotX - lastPoint.plotX) / (plotY - lastPoint.plotY) );
if (theta <= 0 && thisPoint.plotY <...