JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script src="http://code.highcharts.om/highcharts.js"></script>
<!-- script src="http://code.highcharts.om/modules/exporting.js"></script-->
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js#startOpened"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em;"></div>
<div id="report1"></div>
<div id="report2"></div>
<div id="report3"></div>
<div id="report4"></div>

JavaScript

// Plugin for multi-touch support in IE10/11
(function (H) {
    if (window.PointerEvent || window.MSPointerEvent) {
        
        // The touches object keeps track of the points being touched at all times
        touches = {};              

        // Emulate a Webkit TouchList 
        function getWebkitTouches() {
            var fake = [];
            fake.item = function (i) { return this[i]; };
            for (var key in touches) {           
                if (touches.hasOwnProperty(key)) {
                    fake.push({
                        pageX: touches[key].pageX,
                        pageY: touches[key].pageY,
                        target: touches[key].target
                    });
                }
            }
            return fake;            
        }

        // Disable default IE actions for pinch and such on chart element
        H.wrap(H.Pointer.prototype, 'init', function (proceed, chart, options) {
            chart.container.style["-ms-touch-action"] = chart.container.style["touch-action"] = "none";
            proceed.call(this, chart, options);
        });

        // Add IE specific touch events to chart
        H.wrap(H.Pointer.prototype, 'setDOMEvents', function (proceed) {            
            proceed.apply(this, Array.prototype.slice.call(arguments, 1));        
            var pointer = this;
            var eventmap = [
                [this.chart.container, "PointerDown", "touchstart", "onContainerTouchStart", function (e) {  
                    touches[e.pointerId] = { pageX: e.pageX, pageY: e.pageY, target: e.currentTarget };
                }],
                [this.chart.container, "PointerMove", "touchmove", "onContainerTouchMove", function (e) {  
                    touches[e.pointerId] = { pageX: e.pageX, pageY: e.pageY };
                    if (!touches[e.pointerId].target) {
                        touches[e.pointerId].target = e.currentTarget;
                    }    
                }],
      ...