CODEWITHSUNDEEP
javascriptcsshighcharts
Senal
Senal

Reputation: 1610

Tooltip doesn't appearing for overlapping datapoints in highchart xrange

I have an xrange highchart with one series in which some of the data points have overlapping values. I need the get the value of the overlapped data points once when the mouse pointer is over that particular data point. I tried using series mouseover event but from that I can only get one of the overlapped data points. Below is my code,

Highcharts.chart('container', {
      chart: {
        type: 'xrange',
        height: 100,
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: 'transparent'
      },
      plotOptions: {
        series: {
          point: {
            events: {

              mouseOver: (ev) => {
                console.log(ev);
              }
            }
          }
        }
      },
      credits: {
        enabled: false
      },
      title: {
        text: ''
      },
      tooltip: {
        shared: true
      },
      xAxis: {
        visible: true,
        tickLength: 0,
        lineWidth: 2,
        lineColor: '#eee',
        labels: {
          enabled: false
        },
        max: Date.UTC(2019, 6, 13)
      },
      yAxis: {
        visible: false
      },
      legend: {
        enabled: false
      },
      series: [{
        name: '',
        borderRadius: 0,
        pointPadding: 0,
        borderWidth: 4,
        groupPadding: 0,
        data: [{
          x: Date.UTC(2019, 3, 21),
          x2: Date.UTC(2019, 6, 2),
          y: 0,
          color: 'transparent',
          borderColor: 'rgba(230, 141, 11, 0.5)'
        }, {
          x: Date.UTC(2019, 5, 26),
          x2: Date.UTC(2019, 6, 5),
          y: 0,
          color: 'transparent',
          borderColor: 'rgba(228, 53, 70, 0.5)'
        }, {
          x: Date.UTC(2019, 5, 8),
          x2: Date.UTC(2019, 11, 10),
          y: 0,
          color: 'transparent',
          borderColor: 'rgba(40, 167, 69, 0.5)'
        }
        ],
        dataLabels: {
          enabled: false
        }
      }]

    });
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

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

jsfiddle version

I even tried tooltip's shared: true option, but didn't work. Is it possible to achieve this in xrange chart? Thanks in advance!

Upvotes: 0

Views: 415

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can enable followPointer option and in positioner function compare cursor coordinates with points coordinates to show the wanted values in the tooltip label:

tooltip: {
    followPointer: true,
    positioner: function(plotX, plotY, pos) {
        var points = this.chart.series[0].points,
            str = '';

        points.forEach(function(p) {
            if (
                p.shapeArgs.x <= pos.plotX &&
                p.shapeArgs.x + p.shapeArgs.width >= pos.plotX
            ) {
                str += '<span style="color:' + p.borderColor +
                    '">' + p.x + ' - ' + p.x2 + '</span><br>';
            }
        });

        this.label.attr({
            text: str
        });

        return this.getPosition(plotX, plotY, pos)
    }
}

Live demo: http://jsfiddle.net/BlackLabel/n6w1vLbd/

API Reference:

https://api.highcharts.com/highcharts/tooltip.positioner

https://api.highcharts.com/highcharts/tooltip.followPointer

Upvotes: 2

Related Questions