How to display multiple values of the same attribute when hovering on tooltip with highcharts/highmaps

Question

I'm using a highmaps worldmap, and when I hover on a country I want the tooltip to list out all of the food chains that are from that specific country. However I'm only managing to get the tooltip to list out the first result. The number of results for each country vary.

For example, I want the tooltip to list out the following food chains when hovering on the US:

1: {companyName: “Burger King“, hc-key: "us"} 

2: {companyName: “McDonalds”, hc-key: "us"} 

3: {companyName: “Kentucky Fried Chicken”, hc-key: "us"} 

4: {companyName: “Quiznos”, hc-key: "us"} 

5: {companyName: “Subway”, hc-key: "us"} 

6: {companyName: “In and Out“, hc-key: "us"} 

7: {companyName: “Taco Bell“, hc-key: "us"} 

8: {companyName: “Popeyes”, hc-key: "us"} 

9: {companyName: “Jack in the Box”, hc-key: "us"}

10: {companyName: “Italia Pizza”, hc-key: "it"}

10: {companyName: “Italia Pasta”, hc-key: "it"}

My current code outputs the first result, I just don't know enough to edit the tooltip formatter to account for the rest of the results. Thank you.

mapdata(Highcharts){
this.companyData
        .getcompanyCountries(this.selectedIndustry)
        .subscribe(
            (data: any[]) => {
                this.companies = data.map(function(el){
                    return {companyName: el.name, 'hc-key':el.country_code}
                })
                console.log(this.companies)
                // Create the chart
                Highcharts.mapChart('container-map', {
                    chart: {
                        map: worldMap,
                    },
                    title: {
                        text: ''
                    },
                    legend: {
                        enabled: false
                    },
                    mapNavigation: {
                        enabled: false,
                        buttonOptions: {
                        alignTo: 'spacingBox'
                        }
                    },
                    series: [{
                        color: '#ffff00',
                        nullborderColor: '#d3d3d3',
                        type: 'map',
                        name: 'Food Chains',
                        tooltip: {
                           pointFormat: '{point.name}:<br><b>{point.companyName}',
                        },
                        states: {
                        hover: {
                            color: '#ffff00'
                        }
                        },
                        dataLabels: {
                        enabled: false,
                        format: ''
                        },
                        nullColor: 'white',
                        allAreas: true,
                        joinBy: 'hc-key',
                        data: this.companies,
                    }]


            })
            }

        )}

EDITED:

mapdata(Highcharts){
this.companyData
        .getcompanyCountries(this.selectedIndustry)
        .subscribe(
            (data: any[]) => {
                this.companies = data.map(function(code){
                    return {companyName: code.name, code: code.country_code}
                })
                console.log(this.companies)
                // Create the chart
                Highcharts.mapChart('container-map', {
                    chart: {
                        map: worldMap,
                    },
                    title: {
                        text: ''
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                      },
                    mapNavigation: {
                        enabled: false,
                        buttonOptions: {
                        alignTo: 'spacingBox'
                        }
                    },
                    plotOptions: {
                        map: {
                          allAreas: true,
                          joinBy: ['hc-key','code'],
                          dataLabels: {
                            enabled: true,
                            color: '#FFFFFF',
                            style: {
                              fontWeight: 'bold'
                            },
                            // Only show dataLabels for areas with high label rank
                            format: null,
                            formatter: function() {
                              if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                                return this.point.properties['hc-key'];
                              }
                            }
                          },
                          tooltip: {
                            headerFormat: '',
                            pointFormatter: function() {
                              var string = '<b>' + this.name + ':<br>';
                              data.forEach(function(companyName) {
                                string += companyName.name + '<br>'
                              });
                              return string;
                            }
                          }
                        }
                      },

                    series: [{

                        color: '#ffff00',
                        nullborderColor: '#d3d3d3',
                        type: 'map',
                        name: 'Food Chains',
                        states: {
                        hover: {
                            color: '#ffff00'
                        }
                        },
                        dataLabels: {
                        enabled: false,
                        format: ''
                        },
                        nullColor: 'white',
                        data: this.companies,
                    }]


            })
            }

        )}

Easiest way would be to rework your data model to concat all of the company names for the same country before you pass them to Highcharts — Morphyish
– Morphyish, Commented Jul 29, 2019 at 22:34
In addition to the previous comment, good idea might be to use pointFormatter instead of pointFormat, which will help you to easy loop over your companyNames array. Live example: jsfiddle.net/BlackLabel/gekrzdto — Grzegorz Blachliński
– Grzegorz Blachliński, Commented Jul 30, 2019 at 6:59
If my solution will meet your requirements I will post it as a final answer. — Grzegorz Blachliński
– Grzegorz Blachliński, Commented Jul 30, 2019 at 8:31
Thank you very much Grzegorz, I followed your jsfiddle and was able to list out all of the food chains, however all of the foodchains hover over each country matched (not just their respective countries). Is there a small tweak I can do to fix this problem? I included my edited code that follows yours above. Thanks again. — HenryAD
– HenryAD, Commented Jul 30, 2019 at 17:54
Please find my updated example: jsfiddle.net/BlackLabel/gekrzdto/1 — Grzegorz Blachliński
– Grzegorz Blachliński, Commented Aug 5, 2019 at 14:06

Grzegorz Blachliński · Accepted Answer · 2019-08-12 14:07:15Z

1

It is possible to use tooltip pointFormatter or pointFormat options for adding custom information in Highcharts tooltip. You can find more information about this two parameters in Highcharts API: https://api.highcharts.com/highcharts/tooltip.pointFormat https://api.highcharts.com/highcharts/tooltip.pointFormatter

tooltip: {
    pointFormatter: function() {
      var string = '<b>' + this.name + ':<br>';
      this.companyNames.forEach(function(name) {
        string += name + '<br>'
      });
      return string;
    }
  }

Live example: https://jsfiddle.net/BlackLabel/gekrzdto/1/

answered Aug 12, 2019 at 14:07

Grzegorz Blachliński

5,24213 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

How to display multiple values of the same attribute when hovering on tooltip with highcharts/highmaps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related