ColorAxis with HighChart not working as expected w

Question

First Set - JavaScript files to required be used are : My entire application uses the below js library for implementing graph across multiple pages and are configured differently based on conditions are report types,

    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script src="https://code.highcharts.com/modules/treemap.src.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="container"></div>
    <button id='update'>Update</button>

Result from First Set of Library

Common HighChart - configured as below with different set of JavaScript file : The following lines of codes are generating graph for 2 set of library.

var options = {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
      name: 'A',
      value: 6,
      colorValue: 1
    }, {
      name: 'B',
      value: 6,
      colorValue: 2
    }, {
      name: 'C',
      value: 4,
      colorValue: 3
    }, {
      name: 'D',
      value: 3,
      colorValue: 4
    }, {
      name: 'E',
      value: 2,
      colorValue: 5
    }, {
      name: 'F',
      value: 2,
      colorValue: 6
    }, {
      name: 'G',
      value: 1,
      colorValue: 7
    }]
  }],
  title: {
    text: 'Highcharts Treemap'
  }
};

var chart = Highcharts.chart('container', options);

$('#update').click(function() {
  chart.update({
    chart: {
      style: {
        fontSize: '20px',
        fontFamily: 'HelveticaNeue'
      }
    }
  });

  chart.colorAxis[0].update({
    minColor: '#C9364F',
    maxColor: '#36C940',
    labels: {
      style: {
        fontSize: '20px',
        fontFamily: 'HelveticaNeue'
      }
    }
  });
});

**Second Set of JavaScript Files- ** Below are the

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

<div id="container"></div>
<button id='update'>Update</button> 

Result from Second Set of Library

Below line of codes are creating shades of blue for second set of library

 colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  }

The above coloraxis parameter is not working for First Result. Is there different way for implementing color axis for first case.

var _Alphabets

  = [{
  name: 'A',
  value: 6,
  color: '#80FF00'
}, {
  name: 'B',
  value: 6,
  color: '#ADFF30'
}, {
  name: 'C',
  value: 4,
  color: '#00FF7F'
}, {
  name: 'D',
  value: 3,
    color: '#90EE90'
}, {
  name: 'E',
  value: 2,
    color: '#8EBC8E'
}, {
  name: 'F',
  value: 2,
 color: '#3CB371'
}, {
  name: 'G',
  value: 1,
color: '#2E8A57'
}];

var _Fruits

  = [{
  name: 'mango',
  value: 6,
   colorValue: 1
}, {
  name: 'Mango',
  value: 6,
  colorValue: 2
}, {
  name: 'Orange',
  value: 4,
  colorValue: 3
}, {
  name: 'Pomgranate',
  value: 3,
  colorValue: 4
}, {
  name: 'Guava',
  value: 2,
  colorValue: 5
}]
var options = {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
      style: {
        fontSize: '10px',
        fontFamily: 'Arial'
      }
    }
  },
  series: [

    {
      name: 'Alphabets',
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      data: _Alphabets,
     
    }, {
      name: 'Fruits',
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      data: _Fruits, visible: false
    }


  ],

  plotOptions: {
    treemap: {
      showInLegend: true,
      events: {
        legendItemClick: function() {
          this.chart.series.forEach((s) => s.setVisible());
          return false;
        }
      }
    }
  },
  title: {
    text: 'Highcharts Treemap'
  }
};

var chart = Highcharts.chart('container', options);
 

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/treemap.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

Following is the Fiddle

Answer 1

Color axis comes with the heatmap module. I uses space reserved for the legend to genearate color axis - default legend items are not rendered.

The workarond here is to create custom HTML legend:

  chart: {
    events: {
      load: function() {
        var chart = this;

        // legend box
        var div = document.createElement('div');
        div.setAttribute('class', 'legend-box');
        document.getElementsByClassName('highcharts-container')[0].appendChild(div);

        // items
        var ul = document.createElement('ul');
        ul.setAttribute('class', 'item-list');
        div.appendChild(ul);

        this.series.forEach(function(s) {
          var li = document.createElement('li');

          li.innerHTML = s.name;
          li.setAttribute('class', 'menu-item');
          li.style.color = s.color;

          ul.appendChild(li);
          li.addEventListener('click', function() {
            chart.series.forEach((s) => s.setVisible());
          });
        });

      }
    }
  },

Live demo: http://jsfiddle.net/kkulig/uut2vrj8/

The legend that I created here is just for example purposes - it needs some adjustments (changing item's style while corresponding series is not visible, changing the position of the legend when the size of the chart changes etc.).