diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index e89bb0d8785..434a795eba7 100644 --- a/src/plugins/plugin.filler.js +++ b/src/plugins/plugin.filler.js @@ -296,23 +296,29 @@ module.exports = { } }, - beforeDatasetDraw: function(chart, args) { - var meta = args.meta.$filler; - if (!meta) { - return; - } - + beforeDatasetsDraw: function(chart) { + var count = (chart.data.datasets || []).length - 1; var ctx = chart.ctx; - var el = meta.el; - var view = el._view; - var points = el._children || []; - var mapper = meta.mapper; - var color = view.backgroundColor || defaults.global.defaultColor; - - if (mapper && color && points.length) { - helpers.canvas.clipArea(ctx, chart.chartArea); - doFill(ctx, points, mapper, view, color, el._loop); - helpers.canvas.unclipArea(ctx); + var meta, i, el, view, points, mapper, color; + + for (i = count; i >= 0; --i) { + meta = chart.getDatasetMeta(i).$filler; + + if (!meta || !meta.visible) { + continue; + } + + el = meta.el; + view = el._view; + points = el._children || []; + mapper = meta.mapper; + color = view.backgroundColor || defaults.global.defaultColor; + + if (mapper && color && points.length) { + helpers.canvas.clipArea(ctx, chart.chartArea); + doFill(ctx, points, mapper, view, color, el._loop); + helpers.canvas.unclipArea(ctx); + } } } }; diff --git a/test/fixtures/plugin.filler/fill-line-dataset-border.json b/test/fixtures/plugin.filler/fill-line-dataset-border.json new file mode 100644 index 00000000000..46d923374c9 --- /dev/null +++ b/test/fixtures/plugin.filler/fill-line-dataset-border.json @@ -0,0 +1,59 @@ +{ + "config": { + "type": "line", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"], + "datasets": [{ + "backgroundColor": "rgba(255, 0, 0, 0.25)", + "data": [null, null, 0, -1, 0, 1, 0, -1, 0], + "fill": 1 + }, { + "backgroundColor": "rgba(0, 255, 0, 0.25)", + "data": [1, 0, null, 1, 0, null, -1, 0, 1], + "fill": "+1" + }, { + "backgroundColor": "rgba(0, 0, 255, 0.25)", + "data": [0, 2, 0, -2, 0, 2, 0], + "fill": 3 + }, { + "backgroundColor": "rgba(255, 0, 255, 0.25)", + "data": [2, 0, -2, 0, 2, 0, -2, 0, 2], + "fill": "-2" + }, { + "backgroundColor": "rgba(255, 255, 0, 0.25)", + "data": [3, 1, -1, -3, -1, 1, 3, 1, -1], + "fill": "-1" + }] + }, + "options": { + "responsive": false, + "spanGaps": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{ + "display": false + }], + "yAxes": [{ + "display": false + }] + }, + "elements": { + "point": { + "radius": 0 + }, + "line": { + "borderColor": "black", + "borderWidth": 5, + "tension": 0 + } + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-line-dataset-border.png b/test/fixtures/plugin.filler/fill-line-dataset-border.png new file mode 100644 index 00000000000..01afc9f3548 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-line-dataset-border.png differ