text: Q:
  
  Highcharts fill map based on data values with React TypeScript
  
  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;
          }
      }
  }
  
  A:
  
  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
  
  