Angular2 how to do highchart tootip formatter - Additional value

Question

In Series I have used

series: [
        {
          name: 'High usage',
          data: highUsage,
          color: '#009DDB'
        },
        {
          name: 'Normal usage',
          data: normalUsage,
          color: '#83C580'
        }
]

In tooltip

tooltip: { 
    crosshairs: [true, true], 
    formatter: function() { 

    }
}

My JSON format is

"data": {
    "low_usage": [
      {
        "percentage": 77.9,
        "machine": 3
      },
      {
        "percentage": 22.8,
        "machine": 1
      }
    ],

here everything working fine, but I need to show the number of machines also in tooltip like Percentage: 100% (3 machines)
What I have to do in the formatter.

{
"data":{
  "normal_usage":[  
     {  
        "machine":1,
        "percentage":4.3
     },
     {  
        "machine":0,
        "percentage":0
     }
  ],
  "high_usage":[  
     {  
        "machine":0,
        "percentage":0
     },
     {  
        "machine":0,
        "percentage":0
     }
  ]
},
"error_path":"no error",
"success":true
}

This is my input format I send the data based on high usage and low usage

you must be passing data in different format in series.data attribute correct? e.g data for `highUsage` in series of highUsage must be like `{x:1,y:2,name:'high usage'}` just like mention here (array of obje cts)https://api.highcharts.com/highcharts/series.area.data — user1608841, May 17 '18 at 07:13
I need to see that object which you pass in series. What you have posted is your api response....please post that object u pass to series..check this fiddle http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-objects/ — user1608841, May 17 '18 at 07:14
just to illustrate check this fiddle http://jsfiddle.net/u6rqnv1v/ with percentage value... you need to include percentage in the series data — user1608841, May 17 '18 at 07:23
To display `machine` in the tooltip, you need to reference `this.point.machine` in the formatter, specifically you would need `return 'Percentage: ' + this.percentage + '(' + this.point.machine + 'machines)';`. Extending @user1608841 example, see: http://jsfiddle.net/ewolden/u6rqnv1v/1/ — ewolden, May 17 '18 at 07:32
@ewolden I have tried this.point.machine but I got undefined error — , May 17 '18 at 08:02
I guess you are not passing data which is expected to show the things on tooltip..please refer above jsfiddle example done by @ewolden and check how we have passed data to series....@Kanagan — user1608841, May 17 '18 at 10:19
Thanks for all your suggestions, I passed one more data and show the things on tooltip. Thanks @user1608841 — , May 22 '18 at 04:52
mark it as answer so that anyone else who encounter this issue will get help from this post — user1608841, May 23 '18 at 03:26

score -1 · Answer 1 · answered May 22 '18 at 07:49

You need to add more attributes to the series data like below :

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
     tooltip: {
    crosshairs: [true, true], 
        formatter: function () {
        console.log(this)
            return 'value x ' + this.x +
                'value y ' + this.y + 'value percentage '+this.percentage + '<br/>' + this.point.machine;
        }
    },
    xAxis: {
        categories: ['Green', 'Pink']
    },

    series: [{
        data: [{
            name: 'Point 1',
            color: '#00FF00',
            percentage:"90",
            machine: 153,
            y: 1
        }, {
            name: 'Point 2',
            color: '#FF00FF',
             percentage:"80",
             machine: 153,
            y: 5
        }]
    }]
});

Check how I have passed percentage and machine in series data object so that those attributes can be accessible in tooltip formatter function using this.

Working demo

Angular2 how to do highchart tootip formatter - Additional value

1 Answers1