Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Impact vs Effort'
},
subtitle: {
text: 'All Your Base Are Belong To Us'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Effort'
},
labels: {
format: '{value}'
},
min: 0,
max: 100,
tickInterval: 10,
plotLines: [{
color: 'black',
width: 2,
value: 50,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Effort'
},
zIndex: 3
}]
},
yAxis: {
title: {
text: 'Impact'
},
labels: {
format: '{value}'
},
min: 0,
max: 100,
tickInterval: 10,
maxPadding: 0.2,
plotLines: [{
color: 'black',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Impact',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>Project: {point.project}</h3></th></tr>' +
'<tr><th>Effort:</th><td>{point.x}</td></tr>' +
'<tr><th>Impact:</th><td>{point.y}</td></tr>' +
'<tr><th>Cost:</th><td>{point.z} Million</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.id}'
}
}
},
series: [{
data: [
{ x: 80.8, y: 91.5, z: 29.8, id: '102', project: 'Alpha' },
{ x: 8.4, y: 70.1, z: 25.6, id: '201', project: 'Beta' },
{ x: 10.0, y: 93.2, z: 25.7, id: '320', project: 'Delta' },
{ x: 28.6, y: 20.5, z: 26.2, id: '340', project: 'Gamma' },
{ x: 65.5, y: 22.4, z: 35.3, id: '501', project: 'Omega' },
{ x: 5.4, y: 30.8, z: 28.5, id: '504', project: 'Eta' },
{ x: 63.4, y: 51.8, z: 25.4, id: '506', project: 'Sigma' },
{ x: 64.5, y: 82.9, z: 31.3, id: '330', project: 'Omicron' }
]
}]
});
.highcharts-tooltip h3 {
margin: 0.3em 0;
}
<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>
<div id="container" style="height: 500px; width: 500px; margin: 0 auto"></div>