YouTipChartjs Scatter
# Chart.js Mixed Chart
Chart.js can create mixed charts composed of two or more different chart types, such as a combination of bar chart and line chart.
When creating a mixed chart, we specify the chart type on each dataset.
The mixed chart **type** property is scatter.
The bar chart **type** property is bar, the line chart **type** property is line, type describes the chart type.
const mixedChart = new Chart(ctx, { data: { datasets: [{ type: 'bar', label: 'Bar Dataset', data: [45, 49,52, 48] }, { type: 'line', label: 'Line Dataset', data: [50, 40, 45, 49], }], labels: ['January', 'February', 'March', 'April'] }, options: options });
Next, let's create a simple mixed chart:
## Example
const ctx = document.getElementById('myChart');
const data ={
labels:[
'January',
'February',
'March',
'April'
],
datasets:[{
type:'bar',
label:'Bar Dataset',
data:[45,49,52,48],
borderColor:'rgb(255, 99, 132)',
backgroundColor:'rgba(255, 99, 132, 0.2)'
},{
type:'line',
label:'Line Dataset',
data:[50,40,45,49],
fill:false,
borderColor:'rgb(54, 162, 235)'
}]
};
const config ={
type:'scatter',
data: data,
options:{
responsive:true,// Set the chart to be responsive, changes with the screen window
maintainAspectRatio:false,// Maintain the chart's original aspect ratio
scales:{
y:{
beginAtZero:true
}
}
}
};
const myChart =new Chart(ctx, config);
[Try it »](#)
The output of the above example is:
AI is thinking...
[](http://www