YouTipChartjs Bubble
# Chart.js Bubble Chart
Bubble charts are used to show the relationship between three variables.
The position of the bubbles is determined by the first two variables, corresponding to the X-axis and Y-axis, and the third parameter is the size of the bubble.
{ // X axisCorresponding x value: number, // Y axisCorresponding y value: number, // Bubble radiusοΌr value in pixels: number }
The **type** property of the bubble chart is bubble, and type describes the chart type.
const config = { type: 'bubble', data: data, options: {}};
Next, we create a simple bubble chart:
## Example
const ctx = document.getElementById('myChart');
const data ={
datasets:[{
label:'Bubble Chart Example',
data:[{
x:20,// X axis
y:30,// Y axis
r:15// Bubble radius
},{
x:30,
y:20,
r:20
},{
x:40,
y:10,
r:10
}],
backgroundColor:'rgb(255, 99, 132)'
}]
};
const config ={
type:'bubble',// Set the chart type
data: data,// Set the dataset
options:{
},
};
const myChart =new Chart(ctx, config);
[Try it Β»](#)
The output of the above example is:
AI is thinking...
[](#)[Chart.js Bar Chart](#)
[Chart.js Doughnut Chart](#)[](#)
[ByteArk