Highcharts Make Positive Numbers In Ranges Of Green And Negative Ranges Of Red

I have multiple heatmaps in one container. I wanted to set the color axis so that the positive numbers fall in the green range and the negative numbers in the red range. So I set t

Solution 1:

Other way to achieve this is to set color of each data-points inside your heatmap .So , get the series data using heatMapChart.series then use for-loop and access values of each data-points . Finally , update your data-point color i.e : green or red .

Demo Code :

functiongetPointCategoryName(point, dimension) {
  var series = point.series,
    isY = dimension === 'y',
    axis = series[isY ? 'yAxis' : 'xAxis'];
  return axis.categories[point[isY ? 'y' : 'x']];
}

var heatMapChart = Highcharts.chart('container', {

  chart: {
    type: 'heatmap',

  },

  xAxis: {
    categories: ['val1', 'val2', 'val3', ]
  },

  yAxis: [{
    title: {
      text: 'iPhone'
    },
    height: '50%',
    lineWidth: 2,
    categories: ['google', 'bing', 'bing', ]
  }, {
    title: {
      text: 'iPad'
    },
    height: '50%',
    top: '50%',
    offset: 0,
    lineWidth: 2,
    categories: ['google', 'bing', 'bing', ]
  }],

  accessibility: {
    point: {
      descriptionFormatter: function(point) {
        var ix = point.index + 1,
          xName = getPointCategoryName(point, 'x'),
          yName = getPointCategoryName(point, 'y'),
          val = point.value;
        return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
      }
    }
  },

  tooltip: {
    formatter: function() {
      return'<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
        this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
    }
  },

  plotOptions: {
    series: {
      dataLabels: {
        formatter: function() {
          return`${this.point.value}%`
        },

      }
    }
  },

  series: [{
    borderWidth: 1,
    data: [
      [0, 0, -10],
      [0, 1, 10],
      [0, 2, -5],
      [1, 0, 21],
      [1, 1, -10],
      [1, 2, 5],
      [2, 0, -13],
      [2, 1, 53],
      [2, 2, 15],
    ],
    dataLabels: {
      enabled: true,
      color: '#000000'
    },
    showInLegend: false
  }, {
    borderWidth: 1,
    data: [
      [0, 0, 15],
      [0, 1, 11],
      [0, 2, -5],
      [1, 0, 25],
      [1, 1, -5],
      [1, 2, 9],
      [2, 0, -14],
      [2, 1, 65],
      [2, 2, 25],
    ],
    dataLabels: {
      enabled: true,
      color: '#000000'
    },
    showInLegend: false,
    yAxis: 1,
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        yAxis: {
          labels: {
            formatter: function() {
              returnthis.value.charAt(0);
            }
          }
        }
      }
    }]
  }

});

//get series...var dataPoints = heatMapChart.series;
//loop through seriesfor (var i = 0; i < dataPoints.length; i++) {
  //get data inside series..for (var j = 0; j < dataPoints[i].data.length; j++) {
    //update data..
    dataPoints[i].data[j].update({
      color: dataPoints[i].data[j].options.value > 0 ? '#009933' : '#ff3300'//change value depending on value..
    });
  }
}

<scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/modules/heatmap.js"></script><divid="container"></div>