Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

// This IIFE provides a fix for this problem
(function(H) {
  H.Tooltip.prototype.hide = function(delay) {
    const tooltip = this;
    // disallow duplicate timers (#1728, #1766)
    H.clearTimeout(this.hideTimer);
    delay = H.pick(delay, this.options.hideDelay);
    if (!this.isHidden) {
      this.hideTimer = H.syncTimeout(function() {
        // If there is a delay, do fadeOut with the default duration. If
        // the hideDelay is 0, we assume no animation is wanted, so we
        // pass 0 duration. #12994.

        tooltip.getLabel().fadeOut(delay ? void 0 : delay);
        
        H.css(tooltip.container, {
          pointerEvents: 'none'
        });
        
        tooltip.isHidden = true;
      }, delay);
    }
  }
}(Highcharts));

// Create the chart
Highcharts.chart('container', {
  chart: {
    pinchType: 'none',
    panning: {
      enabled: false
    }
  },

  tooltip: {
    followPointer: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    padding: 0,
    style: {
      pointerEvents: 'auto'
    },
    useHTML: true,
    // padding: 10,
    headerFormat: "",
    outside: true,
    pointFormat: '<div style="width: 600px; height: 600px; background-color: blue;">hello</div>'
  },

  series: [{
    type: 'column',
    data: [1, 2, 2, 2, 2, 2, 1],
  }],
});