Bubble without line
@mit_kumar_sinha
by Amit Sinha
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<a href="javascript:void(0)" class="legendevent">Legend</a>
CSS
.highcharts-tooltip h3 {
margin: 0.3em 0;
}
JavaScript
//Highcharts.chart('container', {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 0,
},
credits:{
enabled: false
},
legend: {
enabled: false
},
title: {
text: 'Risk Map'
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
min:0,
max:10,
tickInterval:1,
allowDecimals: true,
title: {
text: 'Impact'
},
labels: {
format: '{value}'
},
plotLines: [{
color: 'black',
dashStyle: 'dash',
width: 1,
value: 5,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
},
zIndex: 3
}]
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineWidth:1,
min:0,
max:10,
tickInterval:1,
allowDecimals: true,
title: {
text: 'Likelihood'
},
labels: {
format: '{value}'
},
plotLines: [{
color: 'black',
dashStyle: 'dash',
width: 1,
value: 5,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.qname}</h3></th></tr>' +
'<tr><th>Likelihood:</th><td>{point.x}</td></tr>' +
'<tr><th>Impact:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format:...