score:8
Figured it out. I added the total to the series, then called it with this.options. See updated code below:
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>';
}
},
series: [{
name: 'Honeywell',
total: 9150,
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
total: 10548,
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
total: 9301,
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
score:12
A more generic & dynamic answer:
legend: {
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
return this.name + '- Total: ' + total;
}
}
Source: stackoverflow.com
Related Query
- Add series total to legend in Highcharts
- HighCharts Hide Series Name from the Legend
- Hiding a Highcharts series without using the legend
- Add additional data to a Highcharts series for use in formatters
- Filtering legend of a Highcharts by only visible series
- Add tooltip to legend in highcharts when hovering
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Highcharts add legend on export
- Highcharts add series dynamically
- Highcharts: add different colors to legend in one series histogram
- Highcharts add tooltip that has a small arrow pointing toward the series
- Dynamically add data to series in Highcharts
- Highcharts hide series without change legend color
- Highcharts JS- add third variable to tooltip for two series
- How to color series legend in highcharts when colorbypoint is set to true
- Showing HighCharts series name on x-axis and in legend
- Highcharts solidgauge legend symbol not taking series color
- How to add series after click event in HighCharts
- How do i add mouse wheel code in Angular2 highcharts in typescript
- Highcharts error when add and shift data to hidden series
- Adding different style to a series in legend in Highcharts
- How to keep the highcharts legend "on" while hiding the series
- How to add multiple series in highcharts synchronously
- Highcharts - Add Series Name As X-Axis Label
- Dynamically add an event to Highcharts series
- Filtering legend of a Highcharts by only visible series only in Export
- Add a max width to legend in Highcharts
- Highcharts no longer animates and readjusts/rescales chart upon addition and removal of series in legend after upgrading to jQuery 1.10
- How can I add a text link just below the legend box in highcharts
- How to add Series data in Highcharts from MVC
More Query from same tag
- Highchart: can I make sure the values on the Y axis are only integers?
- Invalid dates in Highcharts with data loaded by JSON
- Highchart click response time
- Make only one legend active in HighCharts at the start
- Highcharts synchronized charts to show crosshair when snap is false
- highcharts: How do I change the color of the chart above?
- AngularJS : link between directive and controller
- Issues with Netflix ICE
- Tool tip formatter for donut highcharts
- How do I dynamically change a data point in Highcharts using JavaScript
- white border/line color set on hover for the bubbles in the bubble chart not being reset on mouse out from bubble
- How draw plot lines on a solid gauge charts
- How do I create a pie chart from VML shapes?
- Removing gaps before first and after last columns in Highcharts
- Highcharts: Add dots to series and style between empty data points
- highcharts.js column/bar overlap (datetime Xaxis)
- HIghcharts, button text undefined
- Highcharts: Change cursor of plot area
- Can not access Highcharts chart from container, so I can't change data in a chart dynamically
- After setting the yAxis max value, some datalabels are not showing
- Highcharts position dataLabels on hide/show event
- ERROR TypeError: Cannot set property 'proceed' of undefined
- Highchart with external CSV (in external domain)
- Min/Max yAxis not working correctly in Highcharts
- Error using Highcharts (>= 8.0.1) function stockChart() in Angular
- Highcharts Ganttchart (or XRange) group y-Axis elements
- highcharts draggable-points conflict between drag and click
- How would I add a padding to the plot area in HighCharts (HighStock) to pad the border?
- How to add Legend in highchart compare stock chart
- Uncaught TypeError: Cannot read property 'mouseIsDown' of undefined