Hello lilbote,
I'll start with incorrect arrow colors. You couldn't successfully change the arrows colors, because you set global
colorAxis settings, which override vector color. To prevent this behaviour, you need to set
colorAxis value to false, for each vector.
When it comes to arrows values, in this case I would recommend using
SVGrenderer, in order to draw values near each arrows.
Demo: https://jsfiddle.net/BlackLabel/um0so8e3/
API reference: https://api.highcharts.com/class-refere ... derer#text
I was thinking about this problem, and even though approach with SVGrenderer and series.vector is perfectly fine, it seem like responsive hell for some cases, for example, adjusting those arrows positions and lengths when zooming or changing chart dimensions might be really hard to achieve.
Have you tried drawing those arrows with
annotations? I think it might be the most appropriate method in this case.
API reference: https://api.highcharts.com/highcharts/annotations
Best regards!