JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpmEdrvxaqxIIGuawFFtBuhBUQ76Q2hLo&signed_in=true&callback=com/maps/api/js?sensor=false&callback=initMap"></script>
<div id="wrapper">
<div id="map" style="width: 500px; height: 500px;"></div>
<div id="over_map">
<div id="container" style="width: 350px; height: 350px;"></div>
</div>
</div>
CSS
#wrapper { position: relative; }
#over_map { position: absolute; top: 75px; left: 75px; z-index: 99; }
JavaScript
$(function () {
$('#container').highcharts({
chart: {
polar: true,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
title: {
text: ''
},
pane: {
startAngle: 0,
endAngle: 360
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Line 1',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line 2',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'line',
name: 'Line 3',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
var myCenter = new google.maps.LatLng (53.244661, -2.479360)
map = new google.maps.Map(document.getElementById('map'), {
center: myCenter,
zoom: 16,
draggable:false,
scrollwheel:false
});
});