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
Post a Comment