Reputation: 237
Sometimes my points are close together and my highchart is hiding my labels. Is there an option to avoid this (charts are drawn from data that is regularly refreshed)
in the example, point "A TEST" and "B - PLEASE SHOW ME" are close together which results in an overlap. The chart is automatically hiding the label for B, but I want it to show (the chart shouldn't have more than about 3 points so the clutter shouldn't be a problem)
http://jsfiddle.net/4jb4gusj/1/
$(function () {
$('#container').highcharts({
chart: {type: 'scatter'},
title: {text: 'title'},
subtitle: {text: 'subtitle'},
xAxis: {
min: 2,
max: 5,
type: 'linear',
title: {
text: 'Weight'
}
},
yAxis: {
title: {
text: 'Height'
},
min: 110,
max: 170
},
legend: {
Layout : 'vertical'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
scatter: {
dataLabels: {
formatter: function() {
return this.series.name ;
},
enabled: true
},
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: "A TEST ", data: [[3.91, 140.63]]
}, {
name: "B - PLEASE SHOW ME",
data: [[3.65, 143.68]]
}, {
name: "C TEST ",
data: [[2.69, 172.94]]
}
]
});
});
Upvotes: 0
Views: 2148
Reputation: 4769
If overlapping not an issue , use
allowOverlap:true,
updated fiddle here
Upvotes: 1