Add drawTime: beforeDraw option to filler (#8973)

docs/charts/area.md

@@ -68,7 +68,7 @@ Namespace: `options.plugins.filler`
 
 | Option | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `drawTime` | `string` | `beforeDatasetDraw` | Filler draw time. Supported values: `'beforeDatasetDraw'`, `'beforeDatasetsDraw'`
+| `drawTime` | `string` | `beforeDatasetDraw` | Filler draw time. Supported values: `'beforeDraw'`, `'beforeDatasetDraw'`, `'beforeDatasetsDraw'`
 | [`propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
 
 ### propagate

docs/samples/area/line-drawtime.md

@@ -26,7 +26,7 @@ const data = {
       label: 'Dataset 1',
       data: generateData(),
       borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
+      backgroundColor: Utils.CHART_COLORS.red,
       fill: true
     },
     {
@@ -58,6 +58,13 @@ const actions = [
       chart.update();
     }
   },
+  {
+    name: 'drawTime: beforeDraw',
+    handler: (chart) => {
+      chart.options.plugins.filler.drawTime = 'beforeDraw';
+      chart.update();
+    }
+  },
   {
     name: 'Randomize',
     handler(chart) {

src/plugins/plugin.filler.js

@@ -565,19 +565,32 @@ export default {
     }
   },
 
-  beforeDatasetsDraw(chart, _args, options) {
+  beforeDraw(chart, _args, options) {
+    const draw = options.drawTime === 'beforeDraw';
     const metasets = chart.getSortedVisibleDatasetMetas();
     const area = chart.chartArea;
-
     for (let i = metasets.length - 1; i >= 0; --i) {
       const source = metasets[i].$filler;
+      if (!source) {
+        continue;
+      }
 
-      if (source) {
-        source.line.updateControlPoints(area);
+      source.line.updateControlPoints(area);
+      if (draw) {
+        drawfill(chart.ctx, source, area);
+      }
+    }
+  },
 
-        if (options.drawTime === 'beforeDatasetsDraw') {
-          drawfill(chart.ctx, source, area);
-        }
+  beforeDatasetsDraw(chart, _args, options) {
+    if (options.drawTime !== 'beforeDatasetsDraw') {
+      return;
+    }
+    const metasets = chart.getSortedVisibleDatasetMetas();
+    for (let i = metasets.length - 1; i >= 0; --i) {
+      const source = metasets[i].$filler;
+      if (source) {
+        drawfill(chart.ctx, source, chart.chartArea);
       }
     }
   },

test/fixtures/plugin.filler/radar/beforeDraw.js

@@ -0,0 +1,47 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [9, 7, 3, 5, 2, 3],
+        fill: 'origin',
+        borderColor: 'red',
+        backgroundColor: 'green',
+        pointRadius: 12,
+        pointBackgroundColor: 'red'
+      }]
+    },
+    options: {
+      layout: {
+        padding: 20
+      },
+      plugins: {
+        legend: false,
+        filler: {
+          drawTime: 'beforeDraw'
+        }
+      },
+      scales: {
+        r: {
+          angleLines: {
+            color: 'rgba(0,0,0,0.5)',
+            lineWidth: 2
+          },
+          grid: {
+            color: 'rgba(0,0,0,0.5)',
+            lineWidth: 2
+          },
+          pointLabels: {
+            display: false
+          },
+          ticks: {
+            beginAtZero: true,
+            display: false
+          },
+        }
+      }
+    }
+  }
+};