Growth and Decline Stops Solution

by kzoon

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/european-union.js"></script>

<div id="container"></div>

CSS

#container {
    height: 600px; 
    min-width: 310px; 
    max-width: 1200px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

var zeroStop = 0.3;


const updateColorAxis = () => {
  const ext = chart.colorAxis[0].getExtremes();
  var newZeroStop = Math.abs(ext.min) / (Math.abs(ext.min) + ext.max);
  
  var newOptions = {
    stops: [
      [0, '#990000'],
      [newZeroStop, '#ffffff'],
      [1, '#003399']
    ]
  };
  chart.colorAxis[0].update(newOptions, true);
  
    chart.setTitle(null, {
    text: '<b>Zero stop</b>:'+ '<br>'  + 
    'original:' + zeroStop + '<br>' +
    'adjusted:' + newZeroStop + '<br>' +
      '<br><b>data</b><br>' +
      'min: ' + ext.dataMin + '<br>' +
      'max: ' + ext.dataMax + '<br>' +
      'zero position: ' + Math.abs(ext.dataMin) / (Math.abs(ext.dataMin) + ext.dataMax) +
      '<br><b>axis</b><br>' +
      'min: ' + ext.min + '<br>' +
      'max: ' + ext.min + '<br>' +
      'zero position: ' + Math.abs(ext.min) / (Math.abs(ext.min) + ext.max),

    align: 'left',
    floating: true,
    y: 100
  });
  
  
};

var chart = Highcharts.mapChart('container', {
  chart: {
    map: 'custom/european-union'
  },

  legend: {
    layout: 'vertical',
    align: 'left',

  },

  colorAxis: {

    stops: [
      [0, '#990000'],
      [zeroStop, '#ffffff'],
      [1, '#003399']
    ]
  },

  series: [{
    allAreas: false,
    data: [
      ['nl', 280],
      ['de', -120],
      ['fr', 0],
      ['dk', 100],
      ['be', 100],
      ['ie', 100],
      ['es', 120],
      ['it', 75],
      ['gb', 100],
      ['lu', 100],
      ['pt', 200],
    ],

  }]
}, function() {
  window.setTimeout(updateColorAxis, 10);
 
});