# Bubble
{ type: 'bubble', data: { datasets: [{ backgroundColor: Utils.color(0), borderColor: Utils.color(0), data: generateData() }, { backgroundColor: Utils.color(1), borderColor: Utils.color(1), data: generateData() }] }, options: { plugins: { datalabels: { anchor: function(context) { var value = context.dataset.data[context.dataIndex]; return value.v < 50 ? 'end' : 'center'; }, align: function(context) { var value = context.dataset.data[context.dataIndex]; return value.v < 50 ? 'end' : 'center'; }, color: function(context) { var value = context.dataset.data[context.dataIndex]; return value.v < 50 ? context.dataset.backgroundColor : 'white'; }, font: { weight: 'bold' }, formatter: function(value) { return Math.round(value.v); }, offset: 2, padding: 0 } }, // Core options aspectRatio: 5 / 3, layout: { padding: 16 }, elements: { point: { radius: function(context) { var value = context.dataset.data[context.dataIndex]; var size = context.chart.width; var base = Math.abs(value.v) / 100; return (size / 24) * base; } } }, } }
← Radar Interactions →