Tooltip under transform scale

by kzoon

HTML

<script src="https://github.highcharts.com/master/highcharts.js"></script>

<div style="transform: scale(0.7);">
  <div id="container" style="width: 100px;"></div>
</div>

CSS

.highcharts-tooltip-container {
  transform: scale(0.7);
}

JavaScript

function getScale(element) {
  return element.getBoundingClientRect().width / element.offsetWidth;
}

(function(H) {
  H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, point) {
    var chart = this.chart,
      label = this.getLabel(),
      pos = (this.options.positioner || this.getPosition).call(this, label.width, label.height, point),
      scale = getScale(this.chart.container),
      anchorX = (point.plotX + chart.plotLeft) * scale,
      anchorY = (point.plotY + chart.plotTop) * scale,
      pad;

    // Set the renderer size dynamically to prevent document size to change
    if (this.outside) {
      pad = (this.options.borderWidth || 0) + 2 * this.distance;
      this.renderer.setSize(label.width + pad, label.height + pad, false);
      anchorX += chart.pointer.chartPosition.left - pos.x;
      anchorY += chart.pointer.chartPosition.top - pos.y;
    }
    // do the move
    this.move(
      Math.round(pos.x),
      Math.round(pos.y || 0), // can be undefined (#3977)
      anchorX,
      anchorY
    );
  });


  H.wrap(H.Pointer.prototype, 'normalize', function(proceed, e) {
    var e = proceed.call(this, e),
      scale = getScale(this.chart.container);

    e.chartX /= scale;
    e.chartY /= scale;

    return e;
  });
}(Highcharts));

Highcharts.chart('container', {
  tooltip: {
    outside: true,
    positioner: function(w, h, point) {
      var position = this.getPosition(w, h, point),
        scale = getScale(this.chart.container);

      return {
        x: (position.x + w / 2) * scale,
        y: (position.y) * scale
      }
    }
  },
  yAxis: {
    labels: {
      enabled: false
    }
  },
  series: [{
      data: [1, 4, 3, 5, 6, 7, 4, 3, 5, 2, 3, 4, 6, 5, 4],
      type: 'line',
    },
    {
      data: [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
      type: 'column'
    }
  ]
});