Chart label labels overlap plot line meaning
I have a graph with two columns and rows. I added a middle line for a line graph using storylines.
My problem is that the data label for the row overlaps the storyline text. I reproduced the error here (see the last data label) .: http://jsfiddle.net/cs8bqumy/
Can a fix be added after the last column to fix this?
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
height: 400
},
title: {
text: null
},
xAxis: [{ // Suppier names xAxis
categories: ['A','B','C','D','E','F','G','H','I','J'],
labels: { rotation: -90 }
}],
yAxis: [{ // Primary yAxis (Sales)
title: {
text: '<span class="axis-label">Sales Value (AED)</span>',
useHTML: true,
style: {
color: '#89A54E'
}
},
min: 0,
max: 190234
}
, { // Secondary yAxis (Margin %)
title: {
text: '<span class="axis-label">Margin</span>',
useHTML: true
},
labels: {
format: '{value}%'
},
opposite: true,
min: 0,
max: 22,
alignTicks: false,
gridLineWidth: 0,
plotLines : [{
value : 11.66000,
color : 'red',
dashStyle : 'shortdash',
width : 2,
label : {
text : '11.66%',
align: 'right',
style: {
color: 'red'
}
}
}]
}
],
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: { enabled: false },
plotOptions: {
series: { pointWidth: 25 },
column: { colorByPoint: true },
line: {
dataLabels: {
enabled: true,
format: '{y}%',
style: {
fontWeight: 'bold',
color: '#000000',
}
//style: 'background-color:rgba(255,0,0,0.5);'
//backgroundColor: '#FEFEFE',
//shadow: true
}
}
},
series: [{
name: 'Sales Value',
color: '#FFA500',
type: 'column',
data: [104833.6400,38023.0500,53165.2200,21674.0000,37098.4700,42679.6700,23127.3300,34588.5000,33380.0000,15453.0000],
tooltip: {
valuePrefix: 'AED'
}
}
, {
name: 'Margin After Discount (%)',
color: 'lightblue',
yAxis: 1,
data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,11.90],
tooltip: { valueSuffix: '%' }
}
]
});
});
source to share
As mentioned in Adam's answer, you can go and place the datalabel of the last point.
instead of data labels, I advise you to put a plotLine label.
you can control it with the x, y position attributes and left alignment
label: {
x: -50,
y: 10
}
This will be the best solution if your storyline will never intersect with the yAxis grid lines.
fiddle is updated here
source to share
Highcharts allows you to change the position of individual data labels in a dataset. In your example, you would do like this:
data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,{y:11.90, dataLabels: {y:-8}}],
Here it is in the API: http://api.highcharts.com/highcharts#series.data.dataLabels
Though it is best to move your line label above the line. In your example, add y: 20 to plotLines [0] [label].
In the API: http://api.highcharts.com/highcharts#xAxis.plotLines.label.x
source to share