Search code examples
javascripthighcharts

Highcharts - dumbbell tooltip only shows for one range per x-axis


I have a dumbbell Highcharts graph that displays some ranges. If there are multiple ranges per "x"-axis`(my graph is inverted), the tooltip is only shown for one range per "category", doesn't matter where you hover the mouse.

It happens both for overlapping and non-overlapping ranges.

I tried to reduce the problem to most basic case in this fiddle: https://jsfiddle.net/a536ozec/

Am i doing something wrong or is there a setting i'm not aware of?

The config:

Highcharts.chart('container', {
  "chart": {
    "type": "dumbbell",
    "inverted": true,
  },
  "legend": {
    "enabled": true
  },
  "plotOptions": {
    "series": {
      "marker": {
        "enabled": true
      }
    }
  },
  "series": [
    
    {
      "type": "dumbbell",
      "name": "Test",
      "data": [
        {
          "name": "Test1",
          "low": 1658882324000,
          "high": 1699267066000,
          "v": "A"
        },
        {
          "name": "Test1",
          "low": 1681067066000,
          "high": 1739067066000,
          "v": "B"
        },
        {
          "name": "Test2",
          "low": 1658882324000,
          "high": 1690267066000,
          "v": "C"
        },
        {
          "name": "Test2",
          "low": 1711067066000,
          "high": 1739067066000,
          "v": "D"
        },
        
      ],
      "dashStyle": "Solid",
      "lineWidth": 1,
      "label": {
        "enabled": false
      },
      "visible": true,
      "tooltip": null,
    }
  ],
  "xAxis": {
    "labels": {
      "style": {
        "fontSize": "9px"
      }
    },
    "type": "category",
    "crosshair": true
  },
  "yAxis": {
    "title": {
      "text": "Test range"
    },
    "crosshair": true,
    "labels": {
      "format": "{value:%Y%m%d}"
    }
  },
  "tooltip": {
    "pointFormat": "{point.v} - {point.low:%Y%m%d} - {point.high:%Y%m%d}",
    "enabled": true
  }
  
});`

Solution

  • That's because of the default setting for findNearestPointBy, which is x. As a solution set it to xy:

      series: [
        {
          findNearestPointBy: 'xy',
          ...
        }
      ]
    

    Live demo: https://jsfiddle.net/BlackLabel/txwmd3z8/

    API Reference: https://api.highcharts.com/highcharts/series.dumbbell.findNearestPointBy