0

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?

Himanshu
  • 71
  • 9

2 Answers2

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/

magdalena
  • 2,657
  • 1
  • 7
  • 12
  • what about if the keys are dynamic, how do I handle that? – Himanshu Aug 02 '22 at 18:17
  • 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: https://jsfiddle.net/BlackLabel/r27z3yj4/ – magdalena Aug 08 '22 at 13:25
  • Your solution is working in pure JS but along with angular "this" keyword is pointing to component instead of chart. – Himanshu Aug 10 '22 at 12:07
  • Here is a demo in the Highcharts Angular Wrapper: https://stackblitz.com/edit/highcharts-angular-line-yvp4b9?file=src%2Fapp%2Fapp.component.ts – magdalena Aug 10 '22 at 12:28
  • Thank you so much for sharing this updated demo but still in my code "this" keyword still points to my component. – Himanshu Aug 10 '22 at 14:55
  • I am getting this when I am using the below code: formatter: function(event: any) { console.log("Bar Point Details: ",this); console.log("Components Details: ",that); } Answer: {x: Array(1), y: 69, color: '#FFBF00', colorIndex: 0, key: 'TestName', …} this is what I am getting from 1st console but not able to access it's values using "this.x" and "this.y". Can you tell me how can I achieve that? – Himanshu Aug 10 '22 at 15:06
  • I've noticed you created a new thread https://stackoverflow.com/questions/73309631/keys-are-inaccessible-of-json-object-in-angular-highcharts, so I will continue there – magdalena Aug 11 '22 at 10:05
  • 1
    Using the event along with the formatter function, I am able to modify the tooltips. Thanks for all your help. – Himanshu Aug 17 '22 at 21:01
0

Something like this?

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