JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

Highcharts.chart('container', {
  'title': {
    'text': 'Random Chart'
  },
  'tooltip': {
  	'formatter': function(){
    	var output = '<strong>' + this.y + '</strong>';
      var sorted = this.points.sort(function(a, b){
      	if (a.y == b.y){
        	return 0;
				}
        return a.y < b.y ? 1 : -1;
			});
      
      sorted.forEach(function(point, index){
      	var marker = '';
        /* 
        	TODO: How do I determine what symbol is used for the marker?
        */
        output += '<br /><span style="color: ' + point.series.color + '">' + marker + '</span> ' + point.series.name + ': ' + point.y;
      });
      return output;
		},
    'shared': true
	},
  'series': [{
    'name': 'Series 1', 
    'data': [1, 3, 7, 19, 11, 27, 8, 15]
  }, {
    'name': 'Series 2', 
    'data': [2, 1, 8, 12, 14, 20, 9, 10]
  }]
});