CODEWITHSUNDEEP
javascriptreactjstypescripthighcharts
Viet
Viet

Reputation: 6943

Highcharts custom data for map in React TypeScript?

How can I add custom data to my map series?

Currently, the custom data is an array-like object data: [string, number][] and its values look like: [["us",0],["uk",0],...].

Also it looks like the data is joinBy: ["hc-key", "hc-key"] but I cannot even access hc-key in the tooltip:

tooltip: {
        headerFormat: '',
        formatter: function () {
            const country = this.point;
            console.log(this);
    // cannot access this['hc-key'] or country['hc-key']
            const info = `The value for ${country.name} is ${country.value}`
            return info;
        }
    },
// I also filter country by value like this:
colorAxis: {
        dataClasses: [
            {
                from: 0,
                to: 0,
                color: "#9E9E9E",
                name: 'No Data'
            },

How can I make the series to take in a data structure like this instead of the array [[],[],...]:

[
  {country: 'us', name: 'USA', some_value: 0, some_other_values: [{...},{...},...],...},
...
]

so I can display more information in the tooltip but still be able to style each country by its some_value?

I've looked at the answers like here and here but they don't work for me.

I'm working with the code from this example here.

Upvotes: 0

Views: 441

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I prepared a very simple demo example which shows how to create data which will fill your requirements.

Demo: https://jsfiddle.net/BlackLabel/yv5fp80o/

The data: 

var data = [{
  'hc-key': 'in',
  value: 20,
  customValue: [10, 20]
}]

The custom value could be shown in the tooltip by using the formatter feature: https://api.highcharts.com/highcharts/tooltip.formatter

And here is a way how to get the full array of mapData where you can find a hc-key for wanted countries.

console.log(chart.series[0].mapData)

Upvotes: 1

Related Questions