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?

magdalena · Accepted Answer · 2022-08-02 16:24:03Z

1

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/

answered Aug 2, 2022 at 16:24

magdalena

3,7881 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Himanshu Over a year ago

what about if the keys are dynamic, how do I handle that?

magdalena Over a year ago

Generally, this is a more JS-related question. You can use any JS method to find the relevant way to show data in the formatter(). Here is an example you can base on: jsfiddle.net/BlackLabel/r27z3yj4

Himanshu Over a year ago

Your solution is working in pure JS but along with angular "this" keyword is pointing to component instead of chart.

magdalena Over a year ago

Here is a demo in the Highcharts Angular Wrapper: stackblitz.com/edit/…

Himanshu Over a year ago

Using the event along with the formatter function, I am able to modify the tooltips. Thanks for all your help.

|

Ale_Bianco · Accepted Answer · 2022-08-02 10:13:06Z

0

Something like this?

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

answered Aug 2, 2022 at 10:13

Ale_Bianco

6652 gold badges9 silver badges26 bronze badges

5 Comments

Himanshu Over a year ago

Ale - How can I use your code snippet in my code?

Ale_Bianco Over a year ago

@Himanshu can you add console.log(this) inside your formatter function and post the result?

Himanshu Over a year ago

Getting something like this: Inside Formatter Function: {x: Array(1), y: 74, color: '#FA5F55', colorIndex: 0, key: Array(1), …}

Ale_Bianco Over a year ago

@Himanshu look at this one jsfiddle.net/Lhpo1k2f/4

Himanshu Over a year ago

Didn't work out.

Collectives™ on Stack Overflow

Add additional tooltip from from JSON Array

2 Answers 2

8 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related