Reputation: 4809
Is it possible to force the "PB" data label to sit centrally in the ellipse so that it overlaps the y-axis?
I've set allowOverlap
to true
but that only appears to refer to other data labels, not other chart elements.
Thanks
Code from JSfiddle:
Highcharts.chart('container', {
chart: {
type: 'scatter',
marginRight: 20,
marginLeft: 20,
style: {
fontFamily: 'Helvetica'
},
zoomType: 'xy'
},
title: {
text: 'Finish line plot'
},
subtitle: {
text: ''
},
xAxis: {
opposite: true,
gridLineWidth: 1,
reversed: true,
title: {
text: 'seconds back'
},
min: 0
},
yAxis: {
opposite: true,
gridLineWidth: 0,
labels: {
enabled: false
},
lineWidth: 2,
title: {
text: 'Finish line'
},
lineColor: '#000'
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
allowOverlap: true,
formatter: function() {
return this.point.name;
},
x: 0,
y: 10,
style: {
textOutline: 'none'
},
enabled: true
}
},
scatter: {
marker: {
fillColor: '#686',
symbol: 'url(https://www.iconshock.com/image/Golden/Graphics/ellipse/)',
width: 40,
height: 40,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>Competitor info:</b><br>',
pointFormat: '{point.x} seconds back'
}
}
},
series: [{
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{
x: 0,
y: 85,
name: 'PB'
},
{
x: 5.3,
y: 71.8,
name: 'VB'
},
{
x: 3.5,
y: 80.7,
name: 'SF'
},
{
x: 6.5,
y: 72.6,
name: 'RW'
},
{
x: 7.2,
y: 78.8,
name: 'LH'
},
{
x: 1.5,
y: 74.8,
name: 'CM'
},
{
x: 1.7,
y: 93.8,
name: 'SH'
},
{
x: 1.5,
y: 70.0,
name: 'TM'
},
{
x: 3.0,
y: 72.4,
name: 'WP'
},
{
x: 6.0,
y: 85.9,
name: 'DH'
}
]
}]
});
Upvotes: 0
Views: 220
Reputation: 529
Please see Highcharts documentation
Setting properties crop
and overflow
for the dataLabels
should do the trick:
...
series: [{
dataLabels:{
crop: false,
overflow: 'none'
},
name: 'Male',
...
Upvotes: 2