document defaults for plugins (#10490)

diff --git a/docs/configuration/canvas-background.md b/docs/configuration/canvas-background.md
index 36f96ab247e3f4bc773b0add83e1098a092be87e..f4fa7563b9b78e9359255d5c1ca52055f5131538 100644 (file)
--- a/docs/configuration/canvas-background.md
+++ b/docs/configuration/canvas-background.md
@@ -35,7 +35,7 @@ const data = {
 const plugin = {
   id: 'custom_canvas_background_color',
   beforeDraw: (chart) => {
-    const ctx = chart.canvas.getContext('2d');
+    const {ctx} = chart;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
     ctx.fillStyle = 'lightGreen';

diff --git a/docs/developers/plugins.md b/docs/developers/plugins.md
index 972a6bff176f5237d46c3da463872b0b0f8036f7..3b2296a6ec8d0c2eda09691edfc8d11437c92b27 100644 (file)
--- a/docs/developers/plugins.md
+++ b/docs/developers/plugins.md
@@ -120,6 +120,27 @@ const chart = new Chart(ctx, {
 });
 ```
 
+#### Plugin defaults
+
+You can set default values for your plugin options in the `defaults` entry of your plugin object. In the example below the canvas will always have a lightgreen backgroundColor unless the user overrides this option in `options.plugins.custom_canvas_background_color.color`.
+
+```javascript
+const plugin = {
+    id: 'custom_canvas_background_color',
+    beforeDraw: (chart, args, options) => {
+        const {ctx} = chart;
+        ctx.save();
+        ctx.globalCompositeOperation = 'destination-over';
+        ctx.fillStyle = options.color;
+        ctx.fillRect(0, 0, chart.width, chart.height);
+        ctx.restore();
+    },
+    defaults: {
+        color: 'lightGreen'
+    }
+}
+```
+
 ## Plugin Core API
 
 Read more about the [existing plugin extension hooks](../api/interfaces/Plugin).