mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
97 lines
2.3 KiB
Markdown
97 lines
2.3 KiB
Markdown
# Mixed Chart Types
|
|
|
|
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.
|
|
|
|
When creating a mixed chart, we specify the chart type on each dataset.
|
|
|
|
```javascript
|
|
var mixedChart = new Chart(ctx, {
|
|
data: {
|
|
datasets: [{
|
|
type: 'bar',
|
|
label: 'Bar Dataset',
|
|
data: [10, 20, 30, 40]
|
|
}, {
|
|
type: 'line',
|
|
label: 'Line Dataset',
|
|
data: [50, 50, 50, 50],
|
|
}],
|
|
labels: ['January', 'February', 'March', 'April']
|
|
},
|
|
options: options
|
|
});
|
|
```
|
|
|
|
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.
|
|
|
|
```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>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'scatter',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
## Drawing order
|
|
|
|
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.
|
|
|
|
```javascript
|
|
var mixedChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
datasets: [{
|
|
label: 'Bar Dataset',
|
|
data: [10, 20, 30, 40],
|
|
// this dataset is drawn below
|
|
order: 2
|
|
}, {
|
|
label: 'Line Dataset',
|
|
data: [10, 10, 10, 10],
|
|
type: 'line',
|
|
// this dataset is drawn on top
|
|
order: 1
|
|
}],
|
|
labels: ['January', 'February', 'March', 'April']
|
|
},
|
|
options: options
|
|
});
|
|
```
|