Highcharts custom data for map in React TypeScript?

Question

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.

Sebastian Wędzel · Accepted Answer · 2020-02-06 18:24:54Z

1

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)

answered Feb 6, 2020 at 18:24

Sebastian Wędzel

11.7k1 gold badge9 silver badges17 bronze badges

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

3 Comments

Viet Over a year ago

Thank you Sebastian! Let me try it and get back to you.

Sebastian Wędzel Over a year ago

Sure, we can continue this thread here or in case of a new issue start a new topic.

Viet Over a year ago

Thank you. Your answer was what I was looking for!

Collectives™ on Stack Overflow

Highcharts custom data for map in React TypeScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related