Highcharts заполняют карту на основе значений данных с помощью React TypeScript

Question

Я пытаюсь заполнить цвета в странах на основе данных каждой страны. Что-то похожее на эту карту . Нечто похожее на функцию formatter в tooltip.

Я пробовал разные подходы, в том числе с использованием zones (как это описано здесь , здесь и здесь ), но не смог этого сделать.

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;
        }
    }
}

Answer 1

Вы можете использовать colorAxis

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

подробнее о colorAxis