Simple Bubble in JavaScript
Using ApexCharts with JavaScript
This Simple Bubble example uses ApexCharts.js directly in JavaScript, with no wrapper component.
Install it with npm install apexcharts, then mount the chart with new ApexCharts(element, options).render().
// Seeded PRNG so the bubbles are identical on every load (stable snapshots).
var __seed = 0x7ab19c3d
function rand() {
__seed |= 0
__seed = (__seed + 0x6d2b79f5) | 0
var t = Math.imul(__seed ^ (__seed >>> 15), 1 | __seed)
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
return ((t ^ (t >>> 14)) >>> 0) / 4294967296
}
// Each point is [revenue $M, growth %, headcount]. The third value is the
// bubble size, so a bigger bubble = a bigger workforce.
function generateData(count, xrange, yrange, zrange) {
var series = []
for (var i = 0; i < count; i++) {
var x = Math.floor(rand() * (xrange.max - xrange.min + 1)) + xrange.min
var y = Math.floor(rand() * (yrange.max - yrange.min + 1)) + yrange.min
var z = Math.floor(rand() * (zrange.max - zrange.min + 1)) + zrange.min
series.push([x, y, z])
}
return series
}
var options = {
series: [
{
name: 'SaaS',
data: generateData(
12,
{ min: 20, max: 200 },
{ min: 25, max: 65 },
{ min: 20, max: 60 },
),
},
{
name: 'Retail',
data: generateData(
12,
{ min: 150, max: 480 },
{ min: 5, max: 30 },
{ min: 40, max: 75 },
),
},
{
name: 'Fintech',
data: generateData(
12,
{ min: 60, max: 320 },
{ min: 15, max: 50 },
{ min: 15, max: 55 },
),
},
{
name: 'Hardware',
data: generateData(
12,
{ min: 100, max: 400 },
{ min: 2, max: 20 },
{ min: 30, max: 70 },
),
},
],
chart: {
height: 350,
type: 'bubble',
},
dataLabels: {
enabled: false,
},
fill: {
opacity: 0.8,
},
title: {
text: 'Companies: Revenue vs Growth',
},
subtitle: {
text: 'Bubble size = headcount',
},
xaxis: {
tickAmount: 10,
type: 'numeric',
min: 0,
max: 500,
title: {
text: 'Revenue ($M)',
},
},
yaxis: {
max: 70,
title: {
text: 'YoY Growth (%)',
},
},
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()