Highcharts Additional data in Tooltip

Question

I've got the following Highchart working for the most part but I can't get custom data points to show in my tooltip for my 3rd series in a stacked bar chart. Am I formatting the data in the series wrong for my custom data in the tooltip? USMFalse and sentNotAnswered are the custom data items I'm interested in. The USMFalse and sentNotAnswered are values that added together give me the corresponding data value. ie for the first on 3 + 8 = 11 which is the red component of the stacked bar

Fiddle sample here JSFiddle

...
series: [{
       "type": "bar",
       "data": [3056, 6681, 4169, 4399, 2046, 6504, 8435],
       "color": "#D4D3D2",
       "name": "Non-Targeted"
     },

     {
       "type": "bar",
       "data": [4, 0, 1, 0, 6, 0, 0],
       "color": "#16DE47",
       "name": "Participating"
     },

     {
       "type": "bar",
       "color": "#FF5733",
       "name": "Targeted",
       "data": [11, 0, 0, 0, 13, 0, 0],
       "USMFalse": [3, 0, 0, 0, 4, 0, 0],
       "sentNotAnswered": [8, 0, 0, 0, 9, 0, 0]
     }

   ]

score 4 · Accepted Answer · answered Jan 30 '18 at 03:22

Instead of using a numerical array, you will have to define your Targeted array as an array of objects:

{
   "type": "bar",
   "color": "#FF5733",
   "name": "Targeted",
   "data": [{
     y: 11,
     USMFalse: 3,
     sentNotAnswered: 8
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 13,
     USMFalse: 4,
     sentNotAnswered: 9
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }]
 }

Then, in your formatter function you will need to refer to the current point:

if (this.series.name == 'Targeted') {
  text = '<b>' + this.x + '</b> <br>' 
    + this.series.name + ': ' + this.y + '<br>' 
    + this.point.USMFalse + '<br>' 
    + this.point.sentNotAnswered;
}

Here's a jsfiddle: https://jsfiddle.net/d15wad74/

Highcharts Additional data in Tooltip

1 Answers1