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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -