Tooltip under transform scale

by kzoon

HTML

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

<div style="transform: scale(0.7); margin-left:400px">
  <div id="container"></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.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,
    useHTML: true,
    shape: 'rect',
    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
      }
    }
  },
  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'
    }
  ]
});