Add additional tooltip from from JSON Array

Question

I have a JSON array like this:

chart_data = [
{category: 'A', per: '0.74', total: 10294, in: 5651, out: 5661},
{category: 'B', per: '0.72', total: 10294, in: 5556, out: 7751},
{category: 'C', per: '0.68', total: 10294, in: 5598, out: 5991},
{category: 'D', per: '0.54', total: 10294, in: 6551, out: 5001}
]

now I am showing the data in the column chart where I am using per column chart data where in Highcharts the only tooltip visible is "per" but I want to show "total, in, out" all of them in the tooltip.

Here's my HighChart Code:

    plotColumnChart(chart_data:any, chart_config: any){
  
  let columnChartSeries = [];
  let categories = [];
  let columnChartData = {
    exporting: {
      chartOptions: { // specific options for the exported image
          plotOptions: {
              series: {
                  dataLabels: {
                      enabled: true
                  }
              }
          }
      },
      fallbackToExportServer: false
  },
    chart: {
      type: 'column',
      borderColor: '#c1e1c182',
      borderWidth: 1,
      borderRadius: 5,
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: chart_config['name'],
      x: -20,
      style: {
        color: '#0D6ABF',
        fontWeight: 'bold'
      }
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false,
    },
    xAxis: {
      categories: chart_data.map(function(point:any){
        return [(<any>Object).values(point)[0]]
    }),
      title: {
        text: null
      },
      gridLineColor: '#ffffff',
    },
    yAxis: {
      min: 0,
      tickInterval: 20,
      max:100,
      gridLineColor: '#ffffff',
      title: {
        text: null,
        align: null
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      shared: false,
      backgroundColor: 'black',
      borderColor: 'black',
      borderRadius: 10,
      style: {
        color: 'white'
      },
      useHTML: true,
      borderWidth: 3,
      headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
      formatter: function() {

      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          distance: "-80%",
          pointFormat: '{point.y}%',
          },
        },
      column: {
        pointPadding: 0.5,
        borderWidth: 0,
        showInLegend: true, 
        zones:[{
                  value: chart_config['color-format'][0],        // Values up to 50 (not including) ...
                  color: '#FA5F55'  // ... have the this color.
                },
                {
                  value: chart_config['color-format'][1],        // Values up to 60/70 (not including) ...
                  color: '#FFBF00' // ... have the this color.
                },
                {
                  color: '#98FB98' // Values greater than 70 ... have the this color.
                }                
              ],
              }
    },
    series: [
      {
        name: '', //chart_config['name'],
        color: '', //'#98FB98',
        pointWidth: 20,
        data: chart_data.map(function(point:any){                
            return [
              Number(
                    (
                      parseFloat(
                        
                        (<any>Object).values(point)[1]
                        
                        )*100                          
                      ).toFixed(0)
                  )
              ]
          })
      },
    ]
  } as any;

  Highcharts.chart(chart_config['id'], columnChartData);
  
}

And chart_config = {"id": 'column-chart', "name": 'ABC', 'color-format': [50, 70]};

Can anybody help me to achieve this by writing a formatter function for this?

Answer 1

Something like this?

public formatter(row): string {
   return row ? `${row.per}, ${row.in}, ${row.out}` : null;
}

Answer 2

There is no possibility to get other values from the chart level if you don't provide them in the data. In your example, only "per" value is passed to the series.data . After parsing data to the relevant format, you will also need to define series.keys in order to have access to these options.

//Data parsing to the two dimensional array
let new_chart_data = [];

chart_data.forEach(data => {
  data.per = Number(data.per)
  new_chart_data.push([data.category, data.per, data.total, data.in, data.out])
})

//Chart
Highcharts.chart('container', {
  tooltip: {
    pointFormatter: function() {
        console.log(this.options)
      return `<b>Per:</b> ${this.y}</br><b>Total:</b> ${this.total}</br><b>In:</b> ${this.in}</br><b>Out:</b> ${this.out}</br>`
    }
  },

  series: [{
    type: 'column',
    keys: ['name', 'y', 'total', 'in', 'out'],
    pointWidth: 20,
    data: new_chart_data
  }]
});

API Reference: https://api.highcharts.com/highcharts/series.column.keys

Demo: https://jsfiddle.net/BlackLabel/3dh2m79c/