High Chart Data label Formatter not working properly - javascript

I am developing chart with the help of Highchart but data label is not showing correct. On each bar I want to write "hello, hello1, hello2 etc." on the bars but currently it's showing Y axis value.
Check on js fiddle http://jsfiddle.net/NM2Cp/251/
js code is
var count = 0;
var options = {
exporting: {
url: 'http://export.highcharts.com/'
},
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
legend:{
enabled:false
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Attitude',
'Identity',
'Role',
'Agility',
'Fairness',
'Conflict'
],
crosshair: true
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
dataLabels: {
overflow: 'none',
crop: false,
align:'left',
enabled: true,
color: '#000',
style: {fontWeight: 'bolder'},
formatter: function() {
return "hello";
},
inside: true,
rotation: 270
},
pointPadding: 0.1,
groupPadding: 0.1
}
},
series: [{
//name: 'Subcategory1',
data: [{ y: 19.9, color: '#BF0B23'}, { y: 59.9, color: '#01DFD7'}, { y: 49.9, color: '#8258FA'}, { y: 59.9, color: '#04B404'}, { y: 36.9, color: '#B404AE'}, { y: 32.9, color: '#F6CECE'}]
}, {
// name: 'Subcategory2',
data: [{ y: 83.9, color: '#BF0B23'}, { y: 49.9, color: '#01DFD7'}, { y: 29.9, color: '#8258FA'}, { y: 89.9, color: '#04B404'}, { y: 49.9, color: '#B404AE'}, { y: 89.9, color: '#F6CECE'}]
}, {
//name: 'Subcategory3',
data: [{ y: 95.9, color: '#BF0B23'}, { y: 49.9, color: '#01DFD7'}, { y: 15.9, color: '#8258FA'}, { y: 79.9, color: '#04B404'}, { y: 76.9, color: '#B404AE'},{ y: 75.9, color: '#F6CECE'}]
}]
};
var obj = {},
exportUrl = options.exporting.url;
obj.options = JSON.stringify(options);
obj.type = 'image/png';
obj.async = true;
$.ajax({
type: 'post',
url: exportUrl,
data: obj,
success: function (data) {
var imgContainer = $("#imgContainer");
$('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
$('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);
}
});
Image on high chart is


Instead of using (in plotOptions -> series -> dataLabels):
formatter: function() ...
Use this:
format: "Hello",
Please refer to: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels

Related

Highchart xAxis and value did not align

I have highchart series with time, I try to configure as below
http://jsfiddle.net/viethien/3eofd1nk/33/
$(function () {
$('#container').highcharts({
global: {
useUTC: false
},
chart: {
zoomType: 'x',
type:'area',
plotBackgroundColor: '#fff',
backgroundColor:'transparent',
},
credits: {
enabled: false
},
title: {
text: 'X Axis and value not match',
align: 'left',
margin: 30,
style:{
fontFamily:'VegurRegular',
fontSize:'21px'
}
},
subtitle: {
text:'Date Time',
align: 'left',
x: 20,
style: {
color: '#282828',
fontFamily:'VegurRegular'
}
},
xAxis: {
title: {
text: ''
},
type: 'datetime',
labels : {
formatter: function() {
var myDate = new Date(this.value);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);
},
style:{
fontFamily:'VegurRegular'
}
}
},
yAxis: {
opposite:true,
title: {
text: ''
},
labels: {
formatter: function() {
return [this.value];
},
style:{
fontFamily:'VegurRegular'
}
},
},
tooltip: {
shared: true,
formatter: function() {
var myDate = new Date(this.x);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);
},
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#5cc2d6'],
[1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: [{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
{x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
{x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
{x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
{x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
{x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
{x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}]
}]
});
});
I read other article and suggest set utc false but not work.
HighChart- When I use useUTC: false then x axis data are not showing properly
Could you help me this issue?

You can just use tickPositioner function and generate ticks in the same positions as points.
tickPositioner: function() {
return this.series[0].xData;
}
Live demo: http://jsfiddle.net/BlackLabel/43bugf76/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner

Highchart is doing everything right. Once you remove the formatter from both the XAxis Label and Tooltip, you will see that the Timestamps from your dataset are not actually from 00:00 clock.
I see two ways around this, either convert the x UNIX Timestamp from your dataset to display the date only, or change your Highchart configuration to use the display from your dataset as the XAxis.
The code example below includes the function shiftTimeInData to convert the dataset and to align the x with your display.
I also modified your formatter.
function shiftTimeInData(data){
$(data).each(function(){
let d = new Date(this.x);
this.x = Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()+1);
});
return data;
}
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type:'area',
plotBackgroundColor: '#fff',
backgroundColor:'transparent',
},
credits: {
enabled: false
},
title: {
text: 'X Axis and value not match',
align: 'left',
margin: 30,
style:{
fontFamily:'VegurRegular',
fontSize:'21px'
}
},
subtitle: {
text:'Date Time',
align: 'left',
x: 20,
style: {
color: '#282828',
fontFamily:'VegurRegular'
}
},
xAxis: {
title: {
text: ''
},
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
type: 'datetime',
labels : {
style:{
fontFamily:'VegurRegular'
},
align:'left'
}
},
yAxis: {
opposite:true,
title: {
text: ''
},
labels: {
formatter: function() {
return [this.value];
},
style:{
fontFamily:'VegurRegular'
}
},
},
tooltip: {
shared: true,
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#5cc2d6'],
[1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: shiftTimeInData([{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
{x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
{x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
{x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
{x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
{x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
{x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}])
}]
});
});
As you can see, the function shiftTimeInData is called right when adding the data it to the Highchart series.

highcharts StockChart pass multiple values to tooltip

These code are written by javascript,and use hightChart StockChart below.
The program can draw chart by the datetime and report_value1 in the stockChart,and show report_value1 in the tooltip.
I want to add more values to show in the pointFormat of the tooltip.
How to add code to show the rpm value of the speed_data in the tooltip?
var speed_data = [];
for (var i = 0; i < _datalenght; i++) {
v = sData[i];
speed_data.push([
v.report_time * 1000,
v.report_value1,
v.rpm,
]);
}
fuelchart = new Highcharts.StockChart({
chart: {
renderTo: "speed_chart_div",
type: 'line',
zoomType: 'x',
marginRight: 10,
backgroundColor: null
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 5,
text: '5min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'hour',
count: 1,
text: '1hour'
}, {
type: 'hour',
count: 4,
text: '4hour'
}, {
type: 'hour',
count: 8,
text: '8hour'
}, {
type: 'all',
count: 1,
text: 'all'
}],
selected: 5,
inputEnabled: false
},
title: {
text: null
},
subtitle: {
text: '' // dummy text to reserve space for dynamic subtitle
},
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: JLANG.REPORT_SPEED
},
min: 0
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
}
}
},
series: [{
name: JLANG.REPORT_SPEED,
type: 'area',
color: '#357EC7',
lineWidth: 1,
data: speed_data,
tooltip: {
valueDecimals: 0,
useHTML: true,
headerFormat: '<span style="color: {series.color}; font-size:15px;"><b>{point.key}</b></span>',
pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{point.y} km/h</b></span></div>' +
'<br/><div><span style="color: {series.color}; font-size:15px;">rpm: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{???} </b></span></div>'
,
xDateFormat: '%H:%M:%S %d-%m-%Y'
},
gapSize: 0,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
credits: {
enabled: false
}
});

I try it succussfully.
usdeur = [[1187654400000,0.7429,1],[1187740800000,0.7383,2],[1187827200000,0.7369,3]];
propertyData = [];
//propertyData[1187654400000] = {"a":1,"b":2};
//propertyData[1187740800000] = {"a":3,"b":4};
//propertyData[1187827200000] = {"a":5,"b":6};
for (var i = 0; i < usdeur.length; i++) {
propertyData[usdeur[i][0]] = {"a":i,"b":i+1};
}
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: "speed"
},
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 0,
useHTML: true,
xDateFormat: '%H:%M:%S %d-%m-%Y',
/* pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' +
'<div><span style="text-align: right; font-size:15px;"><b>{propertyData[point.x]}.{point.y} km/h</b></span></div>',
*/
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>1 USD = ' + this.y + ' EUR<br/>' +
propertyData[this.x]["a"] + "<br/>" +
propertyData[this.x]["b"] ;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
type: 'area',
name: 'USD to EUR',
data: usdeur
}]
});

Create four chart with same data different rendering(HIGHCHARTS)

Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data

( Highcharts ) How to make dataLabels disappear if there is, a higher column?

I have a chart which has attribute column.grouping set to false,
and I would like to show data labels only on highest columns.
Here is an example
dataLabels: {
enabled: true
}
I have tried to find solution for couple hours now, I would appreciate any help.

I think it would be the easiest to use point.dataLabels.enabled option. Just preprocess data before rendering the chart, to determine which points should display values, see: http://jsfiddle.net/9f1maj3x/
And code:
function enableLabels(d_1, d_2) {
// compare two data series and enable dataLabel for a higher column:
$.each(d_1, function (i, point) {
if (point > d_2[i]) {
d_1[i] = {
dataLabels: {
enabled: true
},
y: d_1[i]
}
} else {
d_2[i] = {
dataLabels: {
enabled: true
},
y: d_2[i]
}
}
});
return [d_1, d_2];
}
Data example:
var data = [
[150, 73, 20],
[140, 90, 40],
[103.6, 178.8, 198.5],
[203.6, 198.8, 208.5]
];
var leftColumns = enableLabels(data[0], data[1]),
rightColumns = enableLabels(data[2], data[3]);
And example in Highcharts:
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: leftColumns[0],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: leftColumns[1],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: rightColumns[0],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: rightColumns[1],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]

you can use
chart.yAxis[0].max;
or
this.dataMax
to get maximum value. to compare , in formatter function compare both and retrun larger one.

You can write a formatter for the dataLabel that checks if it's the highest for that yAxis, here's the API documentation:
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
After comments: You can take the data out of the chart object and use a formatter to pick the largest one, fiddle: http://jsfiddle.net/7zc5peyf/1/
var em = [150, 73, 20];
var eo = [140, 90, 40];
data label code:
data: em,
dataLabels:{
enabled: true,
formatter: function(){
if(this.y > eo[this.point.index]){
return this.y;
}
}
}

Here is my solution:
$(function () {
var something = {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo']
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
series: {
events: {
hide: function () {
console.log(this);
},
show: function () {
console.log(this);
},
legendItemClick: function () {
for (var i = 0; i < something.series.length; i++) {
if (something.series[i].name === this.name) {
something.series[i].visible = !this.visible;
}
}
console.log(this.name);
}
}
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
visible: true,
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[1].data[index]) || !something.series[1].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
visible: true,
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[0].data[index]) || !something.series[0].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
visible: true,
data: [193.6, 128.8, 144.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[3].data[index]) || !something.series[3].visible) {
return this.y + '*';
}
return '';
}
}
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
visible: true,
data: [123.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[2].data[index]) || !something.series[2].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}]
};
$('#container').highcharts(something);
});
http://jsfiddle.net/7zc5peyf/4/

Add series total to legend in Highcharts

Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC',
borderRadius:0,
margin: [0, 150, 30, 0]
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: '#E9E7DC',
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
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: 12345)</span>';
}
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});

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;
}
}

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]
}]
});
});

Categories