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>