Set a Different Color Per Region/Province in a Country

Question

I have created a map of the Indonesian province. I already set up the 'id region' and color for each region. I don't know how to apply different colors in Highmaps.

Check out my js fiddle

I have already added 'colors' in the series properties but it doesn't seem to work. Anything helps!

This is my code

  //set color region in here
    var data = [
    ['id-ac',"#8EE244"], //Aceh
    ['id-su',"#8644FE"]  //Sumatera Utara
    //more 31 province or region
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/id/id-all'
    },

    title: {
        text: 'Indonesia Maps'
    },
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'top'
        }
    },

    legend: {
            enabled: false
        },

    credits: {
      enabled: false
    },
    plotOptions:{
        series:{
            point:{
                events:{
                    click: function(){
                        //console.log(this);
                        alert("Province Code : "+this.options['hc-key']);
                    }
                }
            }
        }
    },
    series: [
    {
        data:  data,
        name: 'Provinsi',
        tooltip: {
           headerFormat: '',
           pointFormat: '{point.name}'
        },
        states: {
            hover: {
                color: '#BADA55'
            }
        }
    }
    ]
});

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2018-09-21T14:07:50

A very minimal change to your code can solve this, by supplying a keys value:

series: [{
    data:  data,
    keys: ['hc-key', 'color'],
    // ...
}]

This maps the first value in your data to the hc-key, and the second value to color of the given data point.

See this JSFiddle demonstration of it in use.

Set a Different Color Per Region/Province in a Country

2 Answers