JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2" style="float: left;width: 30%;margin:0 10px;"></div>
<div id="container3" style="float: left;width: 30%;margin:0 10px;"></div>
<div id="container4" style="float: left;width: 30%;margin:0 10px;"></div>

JavaScript

charts = [];
var x = 0
function syncTooltip(container, p) {
	var i = 0, j = 0, data;
	for (; i < charts.length; i++) {
		if (container.id != charts[i].container.id) {

			data = charts[i].series[0].xData;

			var index = data.indexOf(p);
			if (index > 0){
				var points=[];
				console.log('serires is ',charts[i].series);
				$.each(charts[i].series,function(k,one){
					points.push(one.data[index])
				});
				charts[i].tooltip.refresh(points);
			}
		}
	}
}

for (var i = 0; i < 4; i++) {
	charts[i] = new Highcharts.Chart({
		"chart": {
			"type": "line",
			renderTo: $('#container'+(i+1)).get(0),
			"marginBottom": 25
		},
		"title": {
			"text": "chart"
		},
		"subtitle": {
			"text": "data is here"
		},
		"xAxis": {
			"type": "datetime",
			"minRange": null,
			"dateTimeLabelFormats": {
				"millisecond": "%Y-%m-%d",
				"second": "%Y-%m-%d",
				"minute": "%Y-%m-%d",
				"hour": "%H:%M",
				"day": "%m-%d",
				"week": "%m-%d",
				"month": "%Y-%m-%d",
				"year": "%Y-%m-%d"
			}

		},
		"yAxis": [
			{
				"title": {
					"text": "show amount"
				},
				"opposite": "",
				"min": 0,
				"minRange": null
			},
			{
				"title": {
					"text": "click amount"
				},
				"opposite": "true",
				"min": 0,
				"minRange": null

			}
		],
		"tooltip": {
			"dateTimeLabelFormats": {
				"millisecond": "%Y-%m-%d",
				"second": "%Y-%m-%d",
				"minute": "%Y-%m-%d",
				"hour": "%Y-%m-%d %H:%M",
				"day": "%Y-%m-%d",
				"week": "%Y-%m-%d",
				"month": "%Y-%m-%d",
				"year": "%Y-%m-%d"
			},
			"style": {
				"fontSize": "12px",
				"padding": "8px"
			},
			"shared": "true",
			"crosshairs": "true"
		},
		"legend": {
			"align": "right",
			"verticalAlign": "top",
			"layout": "vertical",
			"x": -40,
			"y": 10,
			"floating": "true",
			"enabled": "true"
		},
		"series": [
			{
				"name": "show amount",
				"data": [
					[1364745600000, 193715695],
					[1364832000000, 189392073],
					[1364918400000, 302954689],
					[1365004800000,...