2021-03-30 16:32:39 +02:00
# Mixed Chart Types
2017-03-21 01:36:54 +01:00
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
2020-05-05 21:19:57 +02:00
When creating a mixed chart, we specify the chart type on each dataset.
2017-03-21 01:36:54 +01:00
```javascript
var mixedChart = new Chart(ctx, {
2019-01-29 13:34:16 +01:00
data: {
datasets: [{
2020-05-05 21:19:57 +02:00
type: 'bar',
2019-01-29 13:34:16 +01:00
label: 'Bar Dataset',
data: [10, 20, 30, 40]
2017-03-21 01:36:54 +01:00
}, {
2020-12-16 16:35:54 +01:00
type: 'line',
2019-01-29 13:34:16 +01:00
label: 'Line Dataset',
data: [50, 50, 50, 50],
2017-03-21 01:36:54 +01:00
}],
2019-01-29 13:34:16 +01:00
labels: ['January', 'February', 'March', 'April']
},
options: options
2017-03-21 01:36:54 +01:00
});
```
2020-10-13 00:06:07 +02:00
At this point, we have a chart rendering how we'd like. It's important to note that the default options for the charts are only considered at the dataset level and are not merged at the chart level in this case.
2020-05-05 21:19:57 +02:00
2021-03-30 16:32:39 +02:00
```js chart-editor
// < block:setup:1 >
const data = {
labels: [
'January',
'February',
'March',
'April'
],
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: [10, 20, 30, 40],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'line',
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
// < / block:setup >
2017-04-02 03:22:06 +02:00
2021-03-30 16:32:39 +02:00
// < block:config:0 >
const config = {
type: 'scatter',
data: data,
options: {
scales: {
y: {
beginAtZero: true
2020-05-05 21:19:57 +02:00
}
2021-03-30 16:32:39 +02:00
}
}
};
// < / block:config >
2020-05-05 21:19:57 +02:00
2021-03-30 16:32:39 +02:00
module.exports = {
actions: [],
config: config,
};
```
2019-10-23 01:14:54 +02:00
## Drawing order
2020-10-13 00:06:07 +02:00
By default, datasets are drawn such that the first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0` . Note that this also affects stacking, legend, and tooltip. So it's essentially the same as reordering the datasets.
2019-10-23 01:14:54 +02:00
```javascript
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [10, 20, 30, 40],
// this dataset is drawn below
2020-01-03 15:08:15 +01:00
order: 2
2019-10-23 01:14:54 +02:00
}, {
label: 'Line Dataset',
data: [10, 10, 10, 10],
type: 'line',
// this dataset is drawn on top
2020-01-03 15:08:15 +01:00
order: 1
2019-10-23 01:14:54 +02:00
}],
labels: ['January', 'February', 'March', 'April']
},
options: options
});
```