Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/coloraxis.js"></script>

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

/**
 * Custom Axis extension to allow emulation of negative values on a logarithmic
 * color axis. Note that the scale is not mathematically correct, as a true
 * logarithmic axis never reaches or crosses zero.
 */
(function(H) {
  H.addEvent(H.Axis, 'afterInit', function() {
    const logarithmic = this.logarithmic;

    if (logarithmic && this.options.allowNegativeLog) {

      // Avoid errors on negative numbers on a log axis
      this.positiveValuesOnly = false;

      // Override the converter functions
      logarithmic.log2lin = num => {
        const isNegative = num < 0;

        let adjustedNum = Math.abs(num);

        if (adjustedNum < 10) {
          adjustedNum += (10 - adjustedNum) / 10;
        }

        const result = Math.log(adjustedNum) / Math.LN10;
        return isNegative ? -result : result;
      };

      logarithmic.lin2log = num => {
        const isNegative = num < 0;

        let result = Math.pow(10, Math.abs(num));
        if (result < 10) {
          result = (10 * (result - 1)) / (10 - 1);
        }
        return isNegative ? -result : result;
      };
    }
  });
}(Highcharts));

Highcharts.chart('container', {
  series: [{
    data: [0, 100, 1000]
  }],
  "colorAxis": {
    "min": 4849377.1,
    "max": 160000000.3,
    "type": 'logarithmic',
    allowNegativeLog: true,
    "minColor": '#EEEEFF',
    "maxColor": '#000022',
    "stops": [
      [0, '#A9A9FF'],
      [0.5, '#4444FF'],
      [1, '#000022']
    ]
  }
});