I want to create barchart having custom horizontal lines added to show average benchmarks. Also there is labels added on these lines to show benchmark heading. I get line labels cut off as shown in following image. Barchart
Also if plot line value is beyond the range plotted, plot line get hidden. How to handle this case in highchart? Following is the code that I am using.
$(function () {
$('#chartContainer').highcharts({
credits: {
enabled: false
},
colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'XYZ Average: 80%',
align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'PQR Average: 60%',
align: 'right'
}
}]
},
legend: {
enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: "s",
data: [70, 10, 40]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>