JSFiddle - React, Tailwind, and code Playground

by jayhilwig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="packetsReverse" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
	<g transform="translate(0,150)">
		<rect width="70" height="50" x="10" y="5" fill="blue" onclick="putToTop(evt)"/>
    <rect width="70" height="50" x="30" y="25" fill="red" onclick="putToTop(evt)"/>

	</g>
</svg>

<script>
		function putToTop(evt) { 

			//get node reference
			var element = evt.target;
			//appendChild after the last child
			element.parentNode.appendChild(element);
 
		}	
</script>

JavaScript

$(function () {
    var chart;
    var lastdate = 1343387830000;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'packetsReverse',
                type: 'area',
                marginTop: 4,
                marginBottom: 4,
                marginLeft: -4,
                marginRight: -4,
                borderColor: '#43c4b7',
                borderRadius: 0,
                borderWidth: 4,
   
                

                animation: false,
                events: {
                    load: function () {

                        // set up the updating of the chart each second
                        var serieslist = this.series;
                        setInterval(function () {
                            lastdate = lastdate + 10000
                            for (seriesidx in serieslist) {
                                var x = lastdate, // current time
                                y = parseInt(Math.random() * 10000);
                                serieslist[seriesidx].addPoint([x, y], true, true);
                            }
                        }, 332);
                    }
                }
            },
            legend: {
                enabled: false
            },
            title: {
                text: null
            },

            xAxis: {
                reversed: true,
                labels: {
                    enabled: false
                },
                tickmarkPlacement: 'off',
                title: {
                    enabled: false
                },
                tickWidth: 0,
                type: 'datetime'
            },
            yAxis: {
                gridLineColor: '#ffffff',
                gridLineWidth: null,
                gridLineDashStyle: 'Dot',
                gridZIndex: 12,
                tickPixelInterval: 100,
                title: {
                    text: null
                },
                labels:...