YouTipChartjs Scatter2
# Chart.js Scatter Chart
A scatter chart consists of multiple coordinate points formed by two sets of data, examining the distribution of the points to determine if there is some correlation between the two variables or to summarize the distribution pattern of the points.
Data structure:
data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]
The scatter chart **type** attribute is scatter.
const config = { type: 'scatter', data: data, options: { scales: { x: { type: 'linear', position: 'bottom' } } }};
Next, we create a simple scatter chart:
## Example
const ctx = document.getElementById('myChart');
const data ={
datasets:[{
label:'Scatter Chart Example',
data:[{
x:-10,
y:0
},{
x:0,
y:10
},{
x:10,
y:5
},{
x:0.5,
y:5.5
}],
backgroundColor:'rgb(255, 99, 132)'
}],
};
const config ={
type:'scatter',
data: data,
options:{
responsive:true,// Set the chart to be responsive, changing with the screen window
maintainAspectRatio:false,// Maintain the original aspect ratio of the chart
scales:{
x:{
type:'linear',
position:'bottom'
}
}
}
};
const myChart =new Chart(ctx, config);
[Try it »](#)
The output of the above example is: