javascript - Hightcharts Avoid "jump effect" on tooltip with "shared:true" -
i avoid call "jump effect" tooltip when cursor hover stacked column. here example of problem encounter : http://jsfiddle.net/ewget3wd/ -> have stacked column, want 1 unique tooltip stacked column, can see on example, tooltip jumps 1 bar others.
i avoid "jump effect" , have 1 shared tooltip. tried parameter shared:true
can see on following example, small arrow of tooltip disapeared : http://jsfiddle.net/5rktjo4g/
to sum up, have 1 tooltip point (with arrow) on top of stacked column.
so here question, possible ? :-)
thanks.
you can used shared property of tooltip , use positioner positioning tooltip. here can find code may you:
positioner: function(labelwidth, labelheight, point) { return { x: point.plotx + labelwidth / 2, y: point.ploty - labelheight / 2 } },
you can add connector wrapping function responsible drawing tooltip shape:
(function(highcharts) { highcharts.renderer.prototype.symbols.callout = function(x, y, w, h, options) { var arrowlength = 6, halfdistance = 6, r = math.min((options && options.r) || 0, w, h), safedistance = r + halfdistance, anchorx = options && options.anchorx, anchory = options && options.anchory, path; path = [ 'm', x + r, y, 'l', x + w - r, y, // top side 'c', x + w, y, x + w, y, x + w, y + r, // top-right corner 'l', x + w, y + h - r, // right side 'c', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner 'l', x + r, y + h, // bottom side 'c', x, y + h, x, y + h, x, y + h - r, // bottom-left corner 'l', x, y + r, // left side 'c', x, y, x, y, x + r, y // top-right corner ]; //bottom arrow path.splice(23, 3, 'l', w / 2 + halfdistance, y + h, w / 2, y + h + arrowlength, w / 2 - halfdistance, y + h, x + r, y + h ); return path; }; }(highcharts));
here can see example how can work: http://jsfiddle.net/ewget3wd/4/
Comments
Post a Comment