diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index 8650248cfb4..146f995b1e0 100644 --- a/src/plugins/plugin.filler.js +++ b/src/plugins/plugin.filler.js @@ -383,9 +383,31 @@ function resolveTarget(sources, index, propagate) { } function _clip(ctx, target, clipY) { + const {segments, points} = target; + let first = true; + ctx.beginPath(); - target.path(ctx); - ctx.lineTo(target.last().x, clipY); + + let lineLoop = false; + for (const segment of segments) { + const {start, end} = segment; + const firstPoint = points[start]; + const lastPoint = points[findSegmentEnd(start, end, points)]; + if (first) { + ctx.moveTo(firstPoint.x, firstPoint.y); + first = false; + } else { + ctx.lineTo(firstPoint.x, clipY); + ctx.lineTo(firstPoint.x, firstPoint.y); + } + lineLoop = !!target.pathSegment(ctx, segment, {move: lineLoop}); + if (lineLoop) { + ctx.closePath(); + } else { + ctx.lineTo(lastPoint.x, clipY); + } + } + ctx.lineTo(target.first().x, clipY); ctx.closePath(); ctx.clip(); diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.json b/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.json new file mode 100644 index 00000000000..e0bce4bce0c --- /dev/null +++ b/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.json @@ -0,0 +1,53 @@ +{ + "config": { + "type": "line", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"], + "datasets": [{ + "borderColor": "rgb(42, 90, 145)", + "data": [null, 12, 30, 36, 45, 53, 68, 79, null, 95, 18, 18, 180], + "fill": { + "target": "+1", + "above": "rgba(4, 142, 43, 0.5)", + "below": "rgba(241, 49, 34, 0.5)" + } + }, { + "borderColor": "#00ADEE", + "data": [null, 0, 0, 0, 0, 0, 20, 108, null, 72, 72, 72, 72], + "fill": false + }] + }, + "options": { + "responsive": false, + "spanGaps": false, + "scales": { + "x": { + "display": false + }, + "y": { + "display": false + } + }, + "elements": { + "point": { + "radius": 0 + }, + "line": { + "cubicInterpolationMode": "monotone", + "borderColor": "transparent" + } + }, + "plugins": { + "legend": false, + "title": false, + "tooltip": false + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.png b/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.png new file mode 100644 index 00000000000..5414dc9bd93 Binary files /dev/null and b/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.png differ diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null.json b/test/fixtures/plugin.filler/line/boundary/above-below-line-null.json new file mode 100644 index 00000000000..405542e149f --- /dev/null +++ b/test/fixtures/plugin.filler/line/boundary/above-below-line-null.json @@ -0,0 +1,53 @@ +{ + "config": { + "type": "line", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"], + "datasets": [{ + "borderColor": "rgb(42, 90, 145)", + "data": [4, 12, 30, 36, 45, 53, 68, 79, null, 95, 18, null, 18, 180], + "fill": { + "target": "+1", + "above": "rgba(4, 142, 43, 0.5)", + "below": "rgba(241, 49, 34, 0.5)" + } + }, { + "borderColor": "#00ADEE", + "data": [0, 0, 0, 0, 0, 0, 20, 108, null, 72, 72, null, 72, 72], + "fill": false + }] + }, + "options": { + "responsive": false, + "spanGaps": false, + "scales": { + "x": { + "display": false + }, + "y": { + "display": false + } + }, + "elements": { + "point": { + "radius": 0 + }, + "line": { + "cubicInterpolationMode": "monotone", + "borderColor": "transparent" + } + }, + "plugins": { + "legend": false, + "title": false, + "tooltip": false + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null.png b/test/fixtures/plugin.filler/line/boundary/above-below-line-null.png new file mode 100644 index 00000000000..7118324e73c Binary files /dev/null and b/test/fixtures/plugin.filler/line/boundary/above-below-line-null.png differ