Drawing horizontal lines parallel to x axis using highcharts.js - highcharts

Question

Below is the fiddle for a Pareto chart. I want to draw a horizontal line parallel to the x-axis which spans from left to right and ends at the 80% mark on the y-axis. I want to do this always while plotting a Pareto chart.
Can you let me know if there's a way to do this dynamically?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderWidth:1,
borderColor:'#ccc',
marginLeft:110,
marginRight:50,
//backgroundColor:'#eee',
//plotBackgroundColor:'#fff',
},
title:{
text:'Pareto Test 1'
},
legend:{
},
tooltip:{
formatter:function(){
if(this.series.name == 'Line'){
var pcnt = Highcharts.numberFormat((this.y / 415 * 100),0,'.');
return pcnt + '%';
}
return this.y;
}
},
plotOptions: {
series: {
shadow:false,
}
},
xAxis:{
categories:['A','B','C','D','E','F','G','H'],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'X Axis Title',
style:{
color:'#000'
}
}
},
yAxis:[{
min:0,
//endOnTick:false,
//lineColor:'#999',
lineWidth:1,
//tickColor:'#666',
//tickWidth:1,
//tickLength:3,
//gridLineColor:'#ddd',
/* title:{
text:'Y Axis Title',
rotation:0,
margin:50,
style:{
color:'#000'
}
}*/
},{
title:{text:''},
//alignTicks:false,
gridLineWidth:0,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
tickInterval:415 / 20,
endOnTick:false,
opposite:true,
linkedTo:0,
labels:{
formatter:function(){
var pcnt = Highcharts.numberFormat((this.value / 415 * 100),0,'.');
return pcnt + '%';
}
}
}],
series: [{
//yAxis:0,
data: [115,75,60,55,45,30,20,15],
},{
type:'line',
name:'Line',
//yAxis:0,
data: [115,190,250,305,350,380,400,415],
}]
});
<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

You can set this up the same way you calculated what 80% is. See the Fiddle below. Here is some sample code to add plotLines:
plotLines: [{
color: '#FF0000',
width: 2,
value: .80 * 415 // Need to set this probably as a var.
}]
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderWidth: 1,
borderColor: '#ccc',
marginLeft: 110,
marginRight: 50,
//backgroundColor:'#eee',
//plotBackgroundColor:'#fff',
},
title: {
text: 'Pareto Test 1'
},
legend: {
},
tooltip: {
formatter: function() {
if (this.series.name == 'Line') {
var pcnt = Highcharts.numberFormat((this.y / 415 * 100), 0, '.');
return pcnt + '%';
}
return this.y;
}
},
plotOptions: {
series: {
shadow: false,
}
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#000'
}
}
},
yAxis: [{
min: 0,
//endOnTick:false,
//lineColor:'#999',
lineWidth: 1
//tickColor:'#666',
//tickWidth:1,
//tickLength:3,
//gridLineColor:'#ddd',
/* title:{
text:'Y Axis Title',
rotation:0,
margin:50,
style:{
color:'#000'
}
}*/
}, {
title: {
text: ''
},
//alignTicks:false,
gridLineWidth: 0,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
tickInterval: 415 / 20,
endOnTick: false,
opposite: true,
linkedTo: 0,
labels: {
formatter: function() {
var pcnt = Highcharts.numberFormat((this.value / 415 * 100), 0, '.');
return pcnt + '%';
}
},
plotLines: [{
color: '#FF0000',
width: 2,
value: .80 * 415 // Need to set this probably as a var.
}]
}],
series: [{
//yAxis:0,
data: [115, 75, 60, 55, 45, 30, 20, 15]
}, {
type: 'line',
name: 'Line',
//yAxis:0,
data: [115, 190, 250, 305, 350, 380, 400, 415]
}]
});
<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>

Answer 2

What you want to look at is a plot line:
http://api.highcharts.com/highcharts#yAxis.plotLines
{{EDIT:
Also, look here for slightly improved way of getting the data sum dynamically:
Highcharts percentage of total for simple bar chart