CODEWITHSUNDEEP
javascripthighchartshighmaps
tomexx
tomexx

Reputation: 2329

Highmaps min/max color not working as expected

I am trying to visualise data values on a world map using Highcharts.

The highest value should be displayed as black fill on the map and minimal value as a white area. However the plotted colors are not matching the minColor and maxColor setup.

Am I doing something wrong or is it a bug in Highmaps?

Here is the full sample code. I also prepared a JSFiddle mock. Thank you for your help.

// sample data
var values = [
  {
    code: "PL",
    value: 743
  },
  {
    code: "FR",
    value: 8205
  },
  {
    code: "DE",
    value: 2303
  },
  {
    code: "BR",
    value: 9404
  },
  {
    code: "ZA",
    value: 2937
  },
  {
    code: "ES",
    value: 2390
  },
  {
    code: "IE",
    value: 2604
  },
  {
    code: "UK",
    value: 5302
  },
  {
    code: "US",
    value: 5178
  }
];

// init min/max with first item
var valuesMin = values[0].value;
var valuesMax = values[0].value;

// find the real min and max
for(var i=0; i<=values.length-1; i++) {
  // save max of all interactions
  if (values[i].value > valuesMax) {
    valuesMax = values[i].value;
  }
  // save min of all interactions
  if (values[i].value < valuesMin) {
    valuesMin = values[i].value;
  }
}

// doublecheck min and max boundaries
console.log(valuesMin);
console.log(valuesMax);

// Initiate the chart
var config = {
  chart: {
    renderTo: 'container',
    type: 'map',
    spacing: [0,0,0,0],
    plotBorderWidth: 0,
    plotBackgroundColor: '#ffffff'
  },

  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  mapNavigation: {
    enabled: false
  },

  colorAxis: {
    minColor: '#ffffff',
    maxColor: '#000000',
    min: valuesMin,
    max: valuesMax,
    minorTickInterval: 0.1,
    tickLength: 0,
    type: 'linear'
  },

  plotOptions: {
    map: {
      states: {
        hover: {
          enabled: false
        },
        normal: {
          animation: false
        }
      }
    }
  },

  // The map series
  series : [
    {
      mapData: Highcharts.maps['custom/world'],
      data : values,
      joinBy: ['iso-a2', 'code']
    }

  ]
};

console.log(values);

var chart = new Highcharts.Map(config);

Fiddle http://jsfiddle.net/tomexx/bpg544f4/

Upvotes: 2

Views: 1201

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Your color axis min and max is being rounded. From the API:

If the startOnTick option is true, the min value might be rounded down.

It defaults to true. To resolve this just add this code:

colorAxis: {
    // ...
    startOnTick: false,
    endOnTick: false
}

As in this updated JSFiddle demonstration.

Upvotes: 1

Related Questions