chart.js - Position tooltip based on mouse position -


i'm using stacked bar chart default range on y -axis 0 - 24. each stacked bar consists of 6 bars (that go 0 4). if total size of stacked bar small, user can not read tooltip because displayed below mouse pointer.

is there way indicate tooltip should displayed (e.g. below mouse if upper part of chart hovered, above if lower part of chart hovered?

the options i'm 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 fiddle explain problem.

this isn't asked for, it's close:

chart.tooltip.positioners.cursor = function(chartelements, coordinates) {   return coordinates; }; 

then in graph options:

options: {   tooltips: {     mode: 'index',     position: 'cursor',     intersect: false   } } 

Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -