Vue Bubble Chart is like a scatter chart, but allows you to visualize data in 3 dimensions. The size of the bubble is determined based on the third parameter.
Appearance of each data point in a bubble chart can be customized using point render event to differentiate each point based on the size.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle.
Easily get started with Vue Bubble Chart using a few simple lines of HTML and JS code example as demonstrated below. Also explore our Vue Bubble Chart Example that shows you how to render and configure the chart.
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html><template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Bubble' xName='x' yName='y'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartPlugin, BubbleSeries, Category } from "@syncfusion/ej2-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: 1, y: 45, text: 'USA', fill: '#00226C', size: 1.347 },
{ x: 2, y: 20, text: 'AUS', fill: '#0450C2', size: 1 },
{ x: 3, y: 56, text: 'CHN', fill: '#0073DC', size: 0.01 },
{ x: 4, y: 30, text: 'IND', fill: '#0D98FF', size: 0.7 },
{ x: 5, y: 13, text: 'JPN', fill: '#9CD9FF', size: 0.333 },
{ x: 6, y: 45, text: 'UK', fill: '#0450C2', size: 1 }
],
primaryXAxis: {
},
};
},
provide: {
chart: [BubbleSeries, Category]
}
};
</script>
