4

I'm using a stacked bar chart with a default range on the y -axis from 0 - 24. Each stacked bar consists of 6 bars (that go from 0 to 4). If the total size of the stacked bar is small, the user can not read the tooltip because it is always displayed below the mouse pointer.

Is there a way to indicate where tooltip should be displayed (e.g. below the mouse if the upper part of the chart is hovered, above if the lower part of the chart is hovered?

The options that I'm currently using are:

$scope.options={
        scales: {
            xAxes: [{
                        stacked: true,
                        type: "time",
                        format: "YYYY-MM-DD",
                        time: {
                            displayFormats: {
                                'millisecond': 'M-D', // Sep 4 2015
                                'second': 'M-D', // Sep 4 2015
                                'minute': 'M-D', // Sep 4 2015
                                'hour': 'M-D', // Sep 4 2015
                                'day': 'M-D', // Sep 4 2015
                                'week': 'M-D', // Sep 4 2015
                                'month': 'M-D', // Sep 4 2015
                                'quarter': 'M-D', // Sep 4 2015
                                'year': 'M-D', // Sep 4 2015
                            },
                            tooltipFormat: 'M-D'
                        }
                }],
                yAxes: [{
                        stacked: true,
                        ticks:{
                            min: 0,
                            max: 24
                        }
                }]
        },
            colors: ["rgba(192,216,0,1.0)","rgba(148,64,237,1.0)","rgba(77,167,77,1.0)",
                     "rgba(203,75,75,1.0)","rgba(255,206,123,1.0)","rgba(0,168,240,1.0)"]
    }

I've created a fiddle to explain the problem.

gadeynebram
  • 725
  • 2
  • 6
  • 22
  • I need a solution for this as well. Any luck? I'm looking for something like how the tooltip is positioned here: http://nvd3.org/livecode/index.html#codemirrorNav – Devon Sams Feb 22 '17 at 20:55

2 Answers2

12

This isn't exactly what you asked for, but it's close:

Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
  return coordinates;
};

Then in your graph options:

options: {
  tooltips: {
    mode: 'index',
    position: 'cursor',
    intersect: false
  }
}
Devon Sams
  • 1,324
  • 2
  • 12
  • 19
7

like Devon Sams said, you can use this :

    Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
      return coordinates;
    };

But in your graph options you put the mode on 'label' and intersect on 'true' :

    options: {
      tooltips: {
        mode: 'label',
        position: 'cursor',
        intersect: true
      }
    }

the tooltip pointer will always be over the chart bar/line in the position of the mouse pointer when hovering the data.

Here is an exemple I made on CodePen : Link

AZIIZ Farhat
  • 174
  • 3
  • 5
  • will you please share live demo in angular, I am little bit confuse to use Chart.Tooltip.positioners.cursor. – jay khatri Oct 12 '20 at 04:56
  • Hello @jaykhatri, here is an exemple : https://codepen.io/AZIIZoom/pen/dyXYvRJ – AZIIZ Farhat Oct 13 '20 at 10:05
  • Thanks @AZIIZ, but this is base of simple HTML version, I am looking for how can i integrate in angular. will you please check this : https://stackoverflow.com/questions/64311980/how-can-i-use-chart-tooltip-positioners-cursor-in-angular-ng2-chart – jay khatri Oct 13 '20 at 10:11
  • sorry @jaykhatri , I didn't worked on angular before, I have no idea on how to make this work. – AZIIZ Farhat Oct 14 '20 at 13:52