Highcharts Heatmap: how to highlight entire column on hover?

Question

I have the following very simple heatmap: https://jsfiddle.net/fujigoko/yhd8a6ct/

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

Highcharts.chart('container', {

  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },

  xAxis: {
    type: 'datetime',
    min: Date.UTC(2023, 9, 1),
    max: Date.UTC(2023, 9, 5),
    labels: {
      align: 'center'
    }
  },

  yAxis: {
    type: 'datetime'
  },

  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },

  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>';
    }
  },

  series: [{
    data: [
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 1), 15],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 2), 30],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 3), 45],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 4), 60],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 5), 75],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 2), 15],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 3), 30],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 4), 45],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 5), 60],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 2), 0],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 3), 15],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 4), 30],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 5), 45],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 2), 0],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 3), 0],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 4), 15],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 5), 30],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 2), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 3), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 4), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 5), 15],
    ],
    colsize: 24 * 36e5,
    rowsize: 24 * 36e5,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]

});

When I move the cursor around, by default, it highlights the current cell by making it lighter with a nice fade effect.

Is there a way to highlight in a similar fashion all the cells in the current column and to specify the color to be used (e.g., yellow)?

Answer 1

You can achieve this by modifying point.mouseOver and point.mouseOut events:

  point: {
    events: {
      mouseOver: function() {
        var point = this,
          chart = point.series.chart,
          allSeries = chart.series,
          x = point.x;
        allSeries.forEach(series => {
          series.points.forEach(point => {
            if (point.x === x) {
              point.update({
                color: 'yellow',
              }, false)
            }
          })
        })
        chart.redraw()
      },
      mouseOut: function() {
        var point = this,
          chart = point.series.chart,
          allSeries = chart.series,
          x = point.x;
        allSeries.forEach(series => {
          series.points.forEach(point => {
            point.update({
              color: '',
            }, false)
          })
        })
        chart.redraw()
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/m380jkLd/

API Reference: https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Point#update