JSFiddle - React, Tailwind, and code Playground

by Jason Rose

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

$(function() {
  $('#container').bind('mousemove touchmove touchstart', function(e) {
    var chart,
      point,
      i,
      event;
    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
      point = chart.series[0].searchPoint(event, true); // Get the hovered point

      if (point) {
        point.highlight(e);
      }
    }
  });
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };
  Highcharts.Point.prototype.highlight = function(event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };
  function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function(chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes'
            });
          }
        }
      });
    }
  }

	// Get data from server
  $.get('https://demo-live-data.highcharts.com/vs-load.csv', function(data) {
 
    // ||| is a custom data separator which separates data for each chart
  	csvData = data.split('|||').map(function(csvPart) {
    	return csvPart;
    });
    
    // Creating charts for each chartdata from csv
    csvData.forEach(function(csv) {
      $('<div class="chart">')
        .appendTo('#container')
        .highcharts({
          chart: {
              type: 'column'
          },
          data: {
              csv: csv
          },
          title: {
              text: 'Fruit Consumption'
          },
          yAxis: {
              title: {
                  text: 'Units'
              }
     ...