Simple Packed Bubble

by Black Label

HTML

<script src="https://github.highcharts.com/master/highcharts.js"></script>
<script src="https://github.highcharts.com/master/highcharts-more.js"></script>
<script src="https://github.highcharts.com/master/modules/exporting.js"></script>

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

CSS

#container {
	min-width: 320px;
	max-width: 800px;
	margin: 0 auto;
}

JavaScript

let data = [{
    api: 'Cars',
    method: 'GET',
    total: 3
  },
  {
    api: 'Cars',
    method: 'POST',
    total: 4
  },
  {
    api: 'Trucks',
    method: 'POST',
    total: 6
  },
  {
    api: 'Boats',
    method: 'GET',
    total: 6
  }
];

let cars = [];
let trucks = [];
let boats = [];

data.forEach(obj => {
  if (obj.api === "Cars") {
    cars.push({
      name: obj.method,
      value: obj.total
    })
  } else if (obj.api === "Trucks") {
    trucks.push({
      name: obj.method,
      value: obj.total
    })
  } else if (obj.api === "Boats") {
    boats.push({
      name: obj.method,
      value: obj.total
    })
  }
})

Highcharts.chart('container', {
  chart: {
    type: 'packedbubble',
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },

  series: [{
    name: 'Cars',
    data: cars
  }, {
    name: 'Trucks',
    data: trucks
  }, {
    name: 'Boats',
    data: boats
  }]
});