Highcharts fill map based on data values with React TypeScript

Question

I'm trying to fill colours in countries based on each country's data. Something similar to this map. Something similar to the function formatter in tooltip.

I've tried different approaches, including using zones (like it's described here, here and here) but couldn't do it.

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';
import worldMapData from '../data/WorldMapData';

const options: Highcharts.Options = {
    series: [{
        type: 'map',
        mapData: mapDataWorld,
        data: worldMapData,
        // Zones don't seem to work for point value
        zones: [{
            value: 2,
            color: '#f7a35c'
        }]
    }],
    tooltip: {
        headerFormat: '',
        formatter: function () {
            const country = this.point;
            const info = `The value for ${country.name} is ${country.value}`
            return info;
        }
    }
}

Alex · Accepted Answer · 2020-02-05 09:33:50Z

3

You can use colorAxis

const options: Highcharts.Options = {
    colorAxis: {
            dataClasses: [{
              to: 10,
              color: "red"
            }, {
              from: 10,
              to: 20,
              color: "orange"
            }, {
              from: 20,
              to: 50,
              color: "yellow"
            }]
          }
      .
      .
      .

more about colorAxis

answered Feb 5, 2020 at 9:33

Alex

3,9911 gold badge20 silver badges27 bronze badges

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

2 Comments

Viet Over a year ago

Thank you @Alex. Let me try it. I'll get back to you.

Viet Over a year ago

That does it. Thank you @Alex.

Collectives™ on Stack Overflow

Highcharts fill map based on data values with React TypeScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related