score:15
Accepted answer
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>
score:3
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
Source: stackoverflow.com
Related Query
- Drawing horizontal lines parallel to x axis using highcharts.js
- Highcharts - Toggling the lines that run parallel to X axis for each value on Y axis?
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts not drawing lines between points
- Dual axis using percentage and absolute value to same serie in Highcharts
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- How to hide color axis in heatmaps using highcharts
- Drawing a regression line in Highcharts using mx + b
- How can I force ticks/grid lines on a Highcharts datetime X axis to arbitrarily line up with data points?
- Highcharts - Using 'errorbar' type overrides axis interval
- Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis
- Highcharts - Line disappears when using logarithmic axis
- Drawing Bubble Chart by using npm highcharts with error #17
- Drawing a simple graph using projected lines
- How can I make milestone lines with a GANTT chart using the highcharts library?
- Highcharts using Django-Chartit. Chart lines not displayed without window resize, or Inspect Element
- Highcharts display label for pie chart using html table as data source
- How do I plot the x axis line using Highcharts when pegged at 0?
- Highcharts - three series using left Y axis and the fourth using the right Y axis
- Displaying date on the x axis with Highcharts using ASP.NET MVC
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- Drawing radar charts using Highcharts in Angular2
- HTML table as data source for highstock charts using highcharts
- Highcharts Spline not drawing graph lines for first 30 points.
- Show dividing lines between horizontal bars on highcharts graph
- Display custom values on x axis using Highcharts
- how to create a horizontal video viewing "heatmap" using Highcharts
- Highcharts - Y axis always visible (even after horizontal scrolling)
- Using a flask variable as data source for highcharts
- How to shift data using Series.addPoint without shifting x axis values in highcharts
More Query from same tag
- Renderer Bring to front highcharts
- More Than 2 Y axis in Grafana
- How to hide a highchars when there is no data to show?
- how to add percentage sign along with int value in graph in java script
- Nothing displayed in Highchart Column
- Fill different colors in boxplot chart Highcharts
- HighCharts: Update the series name label dynamically
- Highcharts.js: scrollable innterText?
- Line and column combo chart with multiple columns for each category, how to position line marker for each category on a specific column?
- Pie chart display just the first element in the series
- displaying entire value on the y-axis in highcharts when the range between the intervals are high
- Convert data to percentages HighCharts
- using Highstock and Highchart-Gantt on same page
- DotnetHighCharts does not show negative values?
- Highstock.js display incorrect value if more than 2000 points
- HighCharts: 3D Column Chart change borderColor on select
- Is there a complete/ready event even if I turn off the animation effect for a HighChart instance?
- Highcharts replacing column/tooltip label
- HighChart marker highlight / tooltip issue, highlight marker does not move
- How to add exporting date and time as user format in Highcharts exporter?
- highcharts inner line on bar chart
- Angular : loop over object data loaded from a webservice
- Place Highstock inside a SVG
- Highchart 5: Pie Drilldown labels and back button not visible
- highcharts - avoid repeating same date on x axis with different time
- Highcharts afterAnimate in combination with xAxis max
- How to color series legend in highcharts when colorbypoint is set to true
- How to access outer scope variables within a click function in HighCharts
- javascript : how to link categories to date in highcharts
- Highcharts: how do I add full data to multiple series in a chart