how to create a responsive custom label in highchart - highcharts

Question

I create a scatter chart and will add a label on a box that has been specified, I've managed to make his label, but when her screen minimized, do not adjust the position of its labels.
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
and my complete code is
$('#ketenagalistrikan-pembenahan-layanan-chart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Pembenahan Dimensi Layanan'
},
subtitle: {
text: 'Source: rad-research.com'
},
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
xAxis: {
title: {
enabled: true,
text: 'Kepentingan'
},
min: -0.5,
max: 39.3,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 12.7,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 26,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 39.3,
zIndex: 3
}]
},
yAxis: {
title: {
text: 'Kepuasan'
},
tickInterval: 8.9,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 46.2,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 55.2,
zIndex: 3
}]
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Marketing',
data: [[8.75, 45.8]]
},{
name: 'Sales',
data: [[15.0, 43.6]]
},{
name: 'Aktivasi/Instalasi',
data: [[-0.3, 53.2]]
},{
name: 'Contact Center',
data: [[1, 52.2]]
},{
name: 'Customer Account',
data: [[-0.3, 60.1]]
},{
name: 'Field Support',
data: [[30.5, 40.3]]
},{
name: 'Billing',
data: [[37.5, 59.2]]
}]
});

Answer 1

Labels in this case are static, so unless you manually redraw them they will will not be responsive.
I prefer another way - you can use renderer and have control rendered objects completely. With the help axis.toPixels() method you can easily make them responsive and stays in the fixed value.
Create item on load event:
load: function () {
this.customTexts = [];
var text = this.renderer.text(
'Responsive text',
this.xAxis[0].toPixels(15),
this.yAxis[0].toPixels(50)
)
.css({
fontSize: '10px'
})
.add();
this.customTexts.push(text);
},
Redraw the item on redraw event:
redraw: function () {
this.customTexts[0].attr({
x: this.xAxis[0].toPixels(15),
y: this.yAxis[0].toPixels(50)
});
}
Example: http://jsfiddle.net/hfev4w7c/