JSFiddle - React, Tailwind, and code Playground

by nlaventis

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<button id="trigger" style="wdith: 15%; font-size: 16px;">Trigger Test</button>

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>
<div id="chart5" class="chart"></div>
<div id="chart6" class="chart"></div>
<div id="chart7" class="chart"></div>
<div id="chart8" class="chart"></div>
<div id="chart9" class="chart"></div>
<div id="chart10" class="chart"></div>

CSS

.chart {
  width: 100%;
  height: 250px;
}

JavaScript

var _globalChart = {
  chartContent: null,
  highchart: null,
  defaults: {
    chart: {
      type: "line"
    },
    rangeSelector: {
    	enabled: false
    },
    navigator: {
    	enabled: false
    },
    xAxis: {
    	type: 'datetime'
    },
    series: [],
    // default options for my project...
  },

  // merge default options with object options
  init: function(options) {
    this.highchart = $.extend(true, {}, this.defaults, options);
    this.highchart.chart.renderTo = this.chartContent;
  },

  //create the chart
  create: function() {
    Highcharts.stockChart(this.highchart);
  }
};

function getData(n) {
    var arr = [],
        i,
        x,
        a,
        b,
        c,
        spike;
    for (
        i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5;
        i < n;
        i = i + 1, x = x + 36e5
    ) {
        if (i % 100 === 0) {
            a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
            b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
            c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
            spike = 10;
        } else {
            spike = 0;
        }
        arr.push([
            x,
            2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
        ]);
    }
    return arr;
}

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].forEach((val) => {
  var chart = {
    chartContent: 'chart'.concat(val),
    options: {
    	title: {
      	text: 'chart'.concat(val)
      },
      series: [{
        data: getData(50000)
      }, {
				data: getData(50000),
        visible: false
      }]
    }
  }
  chart = $.extend(true, {}, _globalChart, chart);
  chart.init(chart.options);
  chart.create();

});

// example trigger 
$('#trigger').click((e) => {
var charts = Highcharts.charts; // this just gets a list of all charts on the page
	$(charts).each(function(i, chart) {
  	console.log(chart);
  	chart.series.forEach(series => series.setVisible(undefined,...