From d3536df4e297256c6dd6066fa4731ca4aa4f4fdf Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Sun, 21 Feb 2021 03:30:13 +0100 Subject: [PATCH 1/7] color done --- docs/docs/configuration/canvas-background.mdx | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 docs/docs/configuration/canvas-background.mdx diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx new file mode 100644 index 00000000000..f02f187a91c --- /dev/null +++ b/docs/docs/configuration/canvas-background.mdx @@ -0,0 +1,99 @@ +--- +title: Canvas background +--- + +In case you want a custom background for the whole canvas and want this to export with the chart when you make a base64 encoded string from it, you will have to use a custom plugin. +In the 2 examples underneath here you can see how you can make a custom plugin that adds a static color, and an image as background for your canvas. + +import { useEffect, useRef } from 'react'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + + ```jsx live + function example() { + const canvas = useRef(null); + useEffect(() => { + const cfg = { + type: 'doughnut', + 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 + }], + }, + plugins: [{ + id: 'customBackgroundColor', + beforeDraw: (chart) => { + const ctx = chart.canvas.getContext('2d'); + ctx.save(); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'lightGreen'; + ctx.fillRect(0, 0, chart.canvas.width, chart.canvas.height); + ctx.restore(); + } + }], + }; + const chart = new Chart(canvas.current.getContext('2d'), cfg); + return () => chart.destroy(); + }); + return
; + } + ``` + + + + + + ```jsx live + function example() { + const canvas = useRef(null); + useEffect(() => { + const cfg = { + type: 'doughnut', + 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 + }] + } + }; + const chart = new Chart(canvas.current.getContext('2d'), cfg); + return () => chart.destroy(); + }); + return
; + } + ``` + + + From fcad86ba6b2b1fa7565e5059f832aa7487bc0539 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 22 Feb 2021 00:58:09 +0100 Subject: [PATCH 2/7] add example inline plugins for background image and color --- docs/docs/configuration/canvas-background.mdx | 178 ++++++++++-------- docs/sidebars.js | 1 + 2 files changed, 97 insertions(+), 82 deletions(-) diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx index f02f187a91c..36e44e7af8e 100644 --- a/docs/docs/configuration/canvas-background.mdx +++ b/docs/docs/configuration/canvas-background.mdx @@ -2,98 +2,112 @@ title: Canvas background --- -In case you want a custom background for the whole canvas and want this to export with the chart when you make a base64 encoded string from it, you will have to use a custom plugin. -In the 2 examples underneath here you can see how you can make a custom plugin that adds a static color, and an image as background for your canvas. +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 examples underneath here you can see how you can make the background a color or an image. 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. import { useEffect, useRef } from 'react'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - + + +```jsx live +function example() { + const canvas = useRef(null); + useEffect(() => { + const cfg = { + type: 'doughnut', + 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 + }] + }, + plugins: [{ + 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.canvas.width, chart.canvas.height); + ctx.restore(); + } + }] + }; + const chart = new Chart(canvas.current.getContext('2d'), cfg); + return () => chart.destroy(); + }); + return
; +} +``` - ```jsx live - function example() { - const canvas = useRef(null); - useEffect(() => { - const cfg = { - type: 'doughnut', - 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 - }], - }, - plugins: [{ - id: 'customBackgroundColor', - beforeDraw: (chart) => { - const ctx = chart.canvas.getContext('2d'); - ctx.save(); - ctx.globalCompositeOperation = 'destination-over'; - ctx.fillStyle = 'lightGreen'; - ctx.fillRect(0, 0, chart.canvas.width, chart.canvas.height); - ctx.restore(); - } - }], - }; - const chart = new Chart(canvas.current.getContext('2d'), cfg); - return () => chart.destroy(); - }); - return
; - } - ``` + - + - +```jsx live +function example() { + const canvas = useRef(null); + const image = new Image(); + image.src = "https://www.chartjs.org/img/chartjs-logo.svg"; - ```jsx live - function example() { - const canvas = useRef(null); - useEffect(() => { - const cfg = { - type: 'doughnut', - 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 - }] - } - }; - const chart = new Chart(canvas.current.getContext('2d'), cfg); - return () => chart.destroy(); - }); - return
; - } - ``` + useEffect(() => { + const cfg = { + type: 'doughnut', + 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 + }] + }, + plugins: [{ + id: 'custom_canvas_background_image', + beforeDraw: (chart) => { + const ctx = chart.canvas.getContext('2d'); + ctx.save(); + ctx.drawImage(image, chart.canvas.width/2-image.width/2,chart.canvas.height/2-image.height/2); + ctx.restore(); + } + }] + }; + const chart = new Chart(canvas.current.getContext('2d'), cfg); + return () => chart.destroy(); + }); + return
; +} +``` - + diff --git a/docs/sidebars.js b/docs/sidebars.js index 8dd60572cbc..dbdf2ed0a44 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -25,6 +25,7 @@ module.exports = { 'configuration/device-pixel-ratio', 'configuration/locale', {Interactions: ['configuration/interactions/index', 'configuration/interactions/events', 'configuration/interactions/modes']}, + 'configuration/canvas-background', 'configuration/animations', 'configuration/layout', 'configuration/legend', From 336c80bd9cd2c3e11e278229016606c89bfecaa8 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 22 Feb 2021 01:00:08 +0100 Subject: [PATCH 3/7] add link to css background --- docs/docs/configuration/canvas-background.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx index 36e44e7af8e..3e9e57c35a4 100644 --- a/docs/docs/configuration/canvas-background.mdx +++ b/docs/docs/configuration/canvas-background.mdx @@ -5,7 +5,7 @@ title: 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 examples underneath here you can see how you can make the background a color or an image. 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. +For normal use you can set the background more easily with [CSS](https://www.w3schools.com/cssref/css3_pr_background.asp). import { useEffect, useRef } from 'react'; import Tabs from '@theme/Tabs'; From c93b40658176c93cae7a8aa0662b9f6834f91561 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 22 Feb 2021 01:07:55 +0100 Subject: [PATCH 4/7] improve text bit --- docs/docs/configuration/canvas-background.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx index 3e9e57c35a4..512427b0974 100644 --- a/docs/docs/configuration/canvas-background.mdx +++ b/docs/docs/configuration/canvas-background.mdx @@ -4,7 +4,7 @@ title: 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 examples underneath here you can see how you can make the background a color or an image. This way of giving the chart a background is only necessary if you want to export the chart with that specific background. +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). import { useEffect, useRef } from 'react'; From 7bacdf197a446fdff8e5e4b808f2b15a54eaab7c Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 22 Feb 2021 13:11:23 +0100 Subject: [PATCH 5/7] fix build error --- docs/docs/configuration/canvas-background.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx index 512427b0974..098cd3a6dd0 100644 --- a/docs/docs/configuration/canvas-background.mdx +++ b/docs/docs/configuration/canvas-background.mdx @@ -69,10 +69,11 @@ function example() { ```jsx live function example() { const canvas = useRef(null); - const image = new Image(); - image.src = "https://www.chartjs.org/img/chartjs-logo.svg"; useEffect(() => { + const image = new Image(); + image.src = "https://www.chartjs.org/img/chartjs-logo.svg"; + const cfg = { type: 'doughnut', data: { From d346ef8b0ccc38b9640d337ea45ae0a9577c5c7a Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 22 Feb 2021 14:09:55 +0100 Subject: [PATCH 6/7] implement kurkles feedback --- docs/docs/configuration/canvas-background.mdx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx index 098cd3a6dd0..6c8ab930364 100644 --- a/docs/docs/configuration/canvas-background.mdx +++ b/docs/docs/configuration/canvas-background.mdx @@ -96,14 +96,17 @@ function example() { plugins: [{ id: 'custom_canvas_background_image', beforeDraw: (chart) => { - const ctx = chart.canvas.getContext('2d'); - ctx.save(); - ctx.drawImage(image, chart.canvas.width/2-image.width/2,chart.canvas.height/2-image.height/2); - ctx.restore(); + if (image.complete) { + const ctx = chart.canvas.getContext('2d'); + ctx.drawImage(image, chart.canvas.width/2-image.width/2, chart.canvas.height/2-image.height/2); + } } }] }; + const chart = new Chart(canvas.current.getContext('2d'), cfg); + image.onload = () => chart.draw(); + return () => chart.destroy(); }); return
; From 609d454c9c342b1f10d9255988808605317421f3 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Mon, 22 Feb 2021 14:48:08 +0100 Subject: [PATCH 7/7] fix indenting tab -> spaces --- docs/docs/configuration/canvas-background.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/docs/configuration/canvas-background.mdx b/docs/docs/configuration/canvas-background.mdx index 6c8ab930364..673e487ade2 100644 --- a/docs/docs/configuration/canvas-background.mdx +++ b/docs/docs/configuration/canvas-background.mdx @@ -43,16 +43,16 @@ function example() { hoverOffset: 4 }] }, - plugins: [{ - id: 'custom_canvas_background_color', - beforeDraw: (chart) => { + plugins: [{ + 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.canvas.width, chart.canvas.height); ctx.restore(); - } + } }] }; const chart = new Chart(canvas.current.getContext('2d'), cfg); @@ -93,19 +93,19 @@ function example() { hoverOffset: 4 }] }, - plugins: [{ - id: 'custom_canvas_background_image', - beforeDraw: (chart) => { + plugins: [{ + id: 'custom_canvas_background_image', + beforeDraw: (chart) => { if (image.complete) { const ctx = chart.canvas.getContext('2d'); ctx.drawImage(image, chart.canvas.width/2-image.width/2, chart.canvas.height/2-image.height/2); } - } + } }] }; const chart = new Chart(canvas.current.getContext('2d'), cfg); - image.onload = () => chart.draw(); + image.onload = () => chart.draw(); return () => chart.destroy(); });