JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var data = [{
  name: 'Tokyo',
  data: [0, 10, 20]

}, {
  name: 'New York',
  data: [23, 24, 48.5]

}, {
  name: 'London',
  data: [48.9, 48.8, 70]

}, {
  name: 'Berlin',
  data: [62.4, 53.2, 94.5]

}];

Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  credits: {
    enabled: false
  },
  title: {
    text: null
  },

  xAxis: [{
    tickmarkPlacement: 'on',
    categories: ['Q1', 'Q2', 'Q3', 'Q4'],
    type: 'datetime',
    startOnTick: true
    /*labels: {
        formatter: function() {
            var date = this.value.split('-');
            return date[1] + '-' + date[0];
        }
    }*/
  }],

  yAxis: [{ // Primary yAxis
    gridLineWidth: 0.25,
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[4]
      }
    },
    title: {
      text: 'primaryTitle',
      style: {
        color: Highcharts.getOptions().colors[4]
      }
    }
  }],
  plotOptions: {
    line: {
      marker: {
        enabled: false
      }
    },
    series: {
      pointPlacement: 'on'
    }
  },
  tooltip: {
    formatter: function() {
      //var date = this.x.split('-');
      //var s = '<b>'+date[2]+'-'+date[1]+'-'+date[0]+'</b>';
      var s = this.x;
      $.each(this.points, function() {
        s += '<br/><span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': ' + '<b>' + this.y + '</b>';
      });

      return s;
    },
    shared: true
  },
  legend: {
    layout: 'horizontal',
    align: 'left',
    x: 50,
    verticalAlign: 'bottom',
    floating: false,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  }
});
var chart = $('#container').highcharts();

for (var i = 0; i < data.length; i++) {
  chart.addSeries({
    name: data[i].name,
    data: data[i].data,
  });
}