How to place dataLabels on series point in Highcharts - highcharts

Question

I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...

Answer 1

Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>