1

I'm struggling with Highcharts, I just want to highlight my columns on mouse hover events this way:

I used fake data like below, but I don't think it's the right way to perform this, moreover I want to keep the tooltip on real columns only, not above the fake one, even though I enabled shared tooltip.

series: [
  {
    states: {
      hover: {
        color: 'rgba(0, 0, 0, 0.4)',
      },
    },
    data: [400000, 400000, 400000, 400000......], // fake data
    type: 'bar',
    color: 'white',
    pointPlacement: 'on',
    pointWidth: 120,
    grouping: false,
    tooltip: { enabled: false },
  },
  {
    data, // real data from elsewhere
    type: 'bar',
    events: {
      mouseOver: () => displayFakeData(),
      mouseOut: () => hideFakeData(),
    },
highpoof
  • 13
  • 3

1 Answers1

0

use xAxis.crosshair of Highchart for the hovered point.

xAxis: {
    crosshair: {
        color: "D9FFFFFF" // change BG color here
    }
},

enter image description here

Code and Demo Here: https://jsfiddle.net/08m21kxo/16/

Shankar Ganesh Jayaraman
  • 1,401
  • 1
  • 16
  • 22