bubble demo

author(s): Mustapha Mekhatria

by mustapha mekhatria

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>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 500px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bubble',
    zoomType: 'xy'
  },
  title: {
    text: 'Productivity vs Hours Worked vs GDP in 2014'
  },
  subtitle: {
    useHTML: true,
    text: 'Source: <a href="http://www.rug.nl/ggdc/productivity/pwt/">University of Groningen</a>'
  },
  yAxis: {
    title: {
      text: 'Annual working hours per worker'
    },
    labels:{
    format:'{value}h'
    }
  },
  xAxis: {
    title: {
      text: 'Productivity (Output in PPP-adjusted $ per hour worked)'
    },
        labels:{
    format:'{value}$'
    }
  },
  tooltip: {
    useHTML: true,
    headerFormat: null,
    pointFormat: '<b>Country</b>: {point.name}<br><b>Productivity</b>: {point.x}$<br/><b>Annual working hours</b>: {point.y}h <br/><b>GDP per capita</b>: {point.z}$  ',
 },
  legend: {
    enabled: false
  },
    plotOptions: {
        bubble: {
            dataLabels: {
                enabled: true,
                format:'{point.iso3}'
            },
        }
    },
  series: [{
    data: [
 {x:59.06,y:1501.71,z:93829.97,name:'Luxembourg',color:'#c5e1a5',iso3:'LUX'},
{x:47.56,y:2262.53,z:80305.45,name:'Singapore',color:'#c5e1a5',iso3:'SGP'},
{x:102.79,y:1426.87,z:63286.69,name:'Norway',color:'#c5e1a5',iso3:'NOR'},
{x:65.42,y:1568,z:56680.44,name:'Switzerland',color:'#c5e1a5',iso3:'CHE'},
{x:63.36,y:1764.6,z:51830.99,name:'United...