Tooltip 6.2.0 with drop-in
by kzoon
HTML
<script src="http://code.highcharts.com/6.2.0/highcharts.js"></script>
<button onclick="updateScale()">
UPDATE
</button>
<div style="margin-right:95px; margin-top:300px;">
<div id="test" style="transform: scale(0.6, 1.2); ">
<div id="container"></div>
</div>
</div>
JavaScript
function updateScale() {
document.getElementById('test').style = "transform: scale(1.2,0.8);"
}
// ---------------------------------------------------------------
// Tooltip drop-in fix
(function(Highcharts) {
var doc = Highcharts.doc,
pick = Highcharts.pick,
H = Highcharts;
function applyContainerScaleModifier(val, container, dim) {
var bb = container.getBoundingClientRect();
return val * {
x: bb.width / container.offsetWidth,
y: bb.height / container.offsetHeight
}[dim];
}
H.Tooltip.prototype.getPosition = function(boxWidth, boxHeight, point) {
var chart = this.chart,
distance = this.distance,
ret = {},
// Don't use h if chart isn't inverted (#7242) ???
h = (chart.inverted && point.h) || 0, // #4117 ???
swapped, outside = this.outside,
outerWidth = outside ?
// substract distance to prevent scrollbars
doc.documentElement.clientWidth - 2 * distance :
chart.chartWidth,
outerHeight = outside ?
Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.body.offsetHeight, doc.documentElement.offsetHeight, doc.documentElement.clientHeight) :
chart.chartHeight,
chartPosition = chart.pointer.chartPosition,
scaleX = function(val) {
return applyContainerScaleModifier(val, chart.container, 'x');
},
scaleY = function(val) {
return applyContainerScaleModifier(val, chart.container, 'y');
},
// Build parameter arrays for firstDimension()/secondDimension()
buildDimensionArray = function(dim) {
var isX = dim === 'x';
return [
dim,
isX ? outerWidth :
outerHeight,
isX ? boxWidth :
boxHeight
].concat(outside ? [
// If we are using tooltip.outside, we need to scale the
// position to match scaling of the container in case there
// is a transform/zoom on the container. #11329
isX ?...