CODEWITHSUNDEEP
javascriptreactjstypescripthighcharts
Viet
Viet

Reputation: 6953

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

Upvotes: 1

Views: 153

Answers (1)

Alex
Alex

Reputation: 3991

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

Upvotes: 3

Related Questions