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>
125 lines
2.8 KiB
Markdown
125 lines
2.8 KiB
Markdown
# Canvas background
|
|
|
|
In some use cases you would want a background image or color over the whole canvas. There is no build in support for this, the way you can achieve this is by writing a custom plugin.
|
|
|
|
In the two example plugins underneath here you can see how you can draw an color or image to the canvas as background. This way of giving the chart a background is only necessary if you want to export the chart with that specific background.
|
|
For normal use you can set the background more easily with [CSS](https://www.w3schools.com/cssref/css3_pr_background.asp).
|
|
|
|
:::: tabs
|
|
|
|
::: tab Color
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const data = {
|
|
labels: [
|
|
'Red',
|
|
'Blue',
|
|
'Yellow'
|
|
],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [300, 50, 100],
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)'
|
|
],
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:plugin:2>
|
|
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
|
|
const plugin = {
|
|
id: 'custom_canvas_background_color',
|
|
beforeDraw: (chart) => {
|
|
const ctx = chart.canvas.getContext('2d');
|
|
ctx.save();
|
|
ctx.globalCompositeOperation = 'destination-over';
|
|
ctx.fillStyle = 'lightGreen';
|
|
ctx.fillRect(0, 0, chart.width, chart.height);
|
|
ctx.restore();
|
|
}
|
|
};
|
|
// </block:plugin>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'doughnut',
|
|
data: data,
|
|
plugins: [plugin],
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
:::
|
|
|
|
::: tab Image
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const data = {
|
|
labels: [
|
|
'Red',
|
|
'Blue',
|
|
'Yellow'
|
|
],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [300, 50, 100],
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)'
|
|
],
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:plugin:2>
|
|
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
|
|
const image = new Image();
|
|
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
|
|
|
|
const plugin = {
|
|
id: 'custom_canvas_background_image',
|
|
beforeDraw: (chart) => {
|
|
if (image.complete) {
|
|
const ctx = chart.ctx;
|
|
const {top, left, width, height} = chart.chartArea;
|
|
const x = left + width / 2 - image.width / 2;
|
|
const y = top + height / 2 - image.height / 2;
|
|
ctx.drawImage(image, x, y);
|
|
} else {
|
|
image.onload = () => chart.draw();
|
|
}
|
|
}
|
|
};
|
|
// </block:plugin>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'doughnut',
|
|
data: data,
|
|
plugins: [plugin],
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
:::
|
|
|
|
::::
|