diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 9bb8e4c8b..f2b0193bd 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -72,6 +72,7 @@ the color of the bars is generally set this way. | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'` | [`borderWidth`](#borderwidth) | number|object | Yes | Yes | `0` +| [`clip`](#general) | number|object | - | - | `undefined` | [`data`](#data-structure) | `object[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined` @@ -85,6 +86,7 @@ the color of the bars is generally set this way. | Name | Description | ---- | ---- +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | `label` | The label for the dataset which appears in the legend and tooltips. | `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend. | `xAxisID` | The ID of the x axis to plot this dataset on. @@ -100,6 +102,7 @@ The style of each bar can be controlled with the following properties: | `borderColor` | The bar border color. | [`borderSkipped`](#borderskipped) | The edge to skip when drawing bar. | [`borderWidth`](#borderwidth) | The bar border width (in pixels). +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options. diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md index 6536395c2..d9dd73892 100644 --- a/docs/charts/bubble.md +++ b/docs/charts/bubble.md @@ -43,6 +43,7 @@ The bubble chart allows a number of properties to be specified for each dataset. | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `3` +| [`clip`](#general) | number|object | - | - | `undefined` | [`data`](#data-structure) | `object[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` @@ -59,6 +60,7 @@ The bubble chart allows a number of properties to be specified for each dataset. | Name | Description | ---- | ---- +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | `label` | The label for the dataset which appears in the legend and tooltips. | `order` | The drawing order of dataset. diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index 5140051b3..b13a422d1 100644 --- a/docs/charts/doughnut.md +++ b/docs/charts/doughnut.md @@ -59,12 +59,20 @@ The doughnut/pie chart allows a number of properties to be specified for each da | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` +| [`clip`](#general) | number|object | - | - | `undefined` | [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` | [`weight`](#styling) | `number` | - | - | `1` +### General + +| Name | Description +| ---- | ---- +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` + + ### Styling The style of each arc can be controlled with the following properties: diff --git a/docs/charts/line.md b/docs/charts/line.md index beec61ed5..665513dae 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -50,6 +50,7 @@ The line chart allows a number of properties to be specified for each dataset. T | [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0` | [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'` | [`borderWidth`](#line-styling) | `number` | Yes | - | `3` +| [`clip`](#general) | number|object | - | - | `undefined` | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'` | [`fill`](#line-styling) | boolean|string | Yes | - | `true` | [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined` @@ -83,6 +84,7 @@ The line chart allows a number of properties to be specified for each dataset. T | Name | Description | ---- | ---- +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | `label` | The label for the dataset which appears in the legend and tooltips. | `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend. | `xAxisID` | The ID of the x axis to plot this dataset on. diff --git a/docs/charts/polar.md b/docs/charts/polar.md index 84275dd93..bbc9f046c 100644 --- a/docs/charts/polar.md +++ b/docs/charts/polar.md @@ -50,11 +50,18 @@ The following options can be included in a polar area chart dataset to configure | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` +| [`clip`](#general) | number|object | - | - | `undefined` | [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` +### General + +| Name | Description +| ---- | ---- +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` + ### Styling The style of each arc can be controlled with the following properties: diff --git a/docs/charts/radar.md b/docs/charts/radar.md index 7ec740266..0e993f597 100644 --- a/docs/charts/radar.md +++ b/docs/charts/radar.md @@ -81,6 +81,7 @@ The radar chart allows a number of properties to be specified for each dataset. | [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined` | [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined` | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined` +| [`clip`](#general) | number|object | - | - | `undefined` | [`fill`](#line-styling) | boolean|string | Yes | - | `true` | [`label`](#general) | `string` | - | - | `''` | [`order`](#general) | `number` | - | - | `0` @@ -102,6 +103,7 @@ The radar chart allows a number of properties to be specified for each dataset. | Name | Description | ---- | ---- +| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | `label` | The label for the dataset which appears in the legend and tooltips. | `order` | The drawing order of dataset. diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 39cf25668..d344f488e 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -79,6 +79,21 @@ module.exports = DatasetController.extend({ return parsed; }, + /** + * @private + */ + _getMaxOverflow: function() { + var me = this; + var meta = me._cachedMeta; + var data = meta.data || []; + if (!data.length) { + return false; + } + var firstPoint = data[0].size(); + var lastPoint = data[data.length - 1].size(); + return Math.max(firstPoint, lastPoint) / 2; + }, + /** * @protected */ diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index b7fc90c29..c4e49110b 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -159,6 +159,22 @@ module.exports = DatasetController.extend({ return values; }, + /** + * @private + */ + _getMaxOverflow: function() { + var me = this; + var meta = me._cachedMeta; + var data = meta.data || []; + if (!data.length) { + return false; + } + var border = me._showLine ? meta.dataset._model.borderWidth : 0; + var firstPoint = data[0].size(); + var lastPoint = data[data.length - 1].size(); + return Math.max(border, firstPoint, lastPoint) / 2; + }, + updateBezierControlPoints: function() { var me = this; var chart = me.chart; @@ -222,21 +238,10 @@ module.exports = DatasetController.extend({ var area = chart.chartArea; var i = 0; var ilen = points.length; - var halfBorderWidth; if (me._showLine) { - halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2; - - helpers.canvas.clipArea(chart.ctx, { - left: area.left - halfBorderWidth, - right: area.right + halfBorderWidth, - top: area.top - halfBorderWidth, - bottom: area.bottom + halfBorderWidth - }); meta.dataset.draw(); - - helpers.canvas.unclipArea(chart.ctx); } // Draw the points diff --git a/src/core/core.controller.js b/src/core/core.controller.js index db5391dd9..fb42f1195 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -772,6 +772,10 @@ helpers.extend(Chart.prototype, /** @lends Chart */ { */ drawDataset: function(meta, easingValue) { var me = this; + var ctx = me.ctx; + var clip = meta._clip; + var canvas = me.canvas; + var area = me.chartArea; var args = { meta: meta, index: meta.index, @@ -782,8 +786,17 @@ helpers.extend(Chart.prototype, /** @lends Chart */ { return; } + helpers.canvas.clipArea(ctx, { + left: clip.left === false ? 0 : area.left - clip.left, + right: clip.right === false ? canvas.width : area.right + clip.right, + top: clip.top === false ? 0 : area.top - clip.top, + bottom: clip.bottom === false ? canvas.height : area.bottom + clip.bottom + }); + meta.controller.draw(easingValue); + helpers.canvas.unclipArea(ctx); + plugins.notify(me, 'afterDatasetDraw', [args]); }, diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js index a434d0c5a..9d33d72a9 100644 --- a/src/core/core.datasetController.js +++ b/src/core/core.datasetController.js @@ -48,6 +48,53 @@ function listenArrayEvents(array, listener) { }); } + +function scaleClip(scale, allowedOverflow) { + var tickOpts = scale && scale.options.ticks || {}; + var reverse = tickOpts.reverse; + var min = tickOpts.min === undefined ? allowedOverflow : 0; + var max = tickOpts.max === undefined ? allowedOverflow : 0; + return { + start: reverse ? max : min, + end: reverse ? min : max + }; +} + +function defaultClip(xScale, yScale, allowedOverflow) { + if (allowedOverflow === false) { + return false; + } + var x = scaleClip(xScale, allowedOverflow); + var y = scaleClip(yScale, allowedOverflow); + + return { + top: y.end, + right: x.end, + bottom: y.start, + left: x.start + }; +} + +function toClip(value) { + var t, r, b, l; + + if (helpers.isObject(value)) { + t = value.top; + r = value.right; + b = value.bottom; + l = value.left; + } else { + t = r = b = l = value; + } + + return { + top: t, + right: r, + bottom: b, + left: l + }; +} + /** * Removes the given array event listener and cleanup extra attached properties (such as * the _chartjs stub and overridden methods) if array doesn't have any more listeners. @@ -556,6 +603,9 @@ helpers.extend(DatasetController.prototype, { return applyStack(stack, value, meta.index); }, + /** + * @private + */ _getMinMax: function(scale, canStack) { var chart = this.chart; var meta = this._cachedMeta; @@ -596,6 +646,9 @@ helpers.extend(DatasetController.prototype, { }; }, + /** + * @private + */ _getAllParsedValues: function(scale) { var meta = this._cachedMeta; var metaData = meta.data; @@ -611,6 +664,9 @@ helpers.extend(DatasetController.prototype, { return values; }, + /** + * @private + */ _cacheScaleStackStatus: function() { var me = this; var indexScale = me._getIndexScale(); @@ -622,6 +678,9 @@ helpers.extend(DatasetController.prototype, { } }, + /** + * @private + */ _scaleCheck: function() { var me = this; var indexScale = me._getIndexScale(); @@ -634,11 +693,19 @@ helpers.extend(DatasetController.prototype, { cache[valueScale.id] !== valueScale.options.stacked; }, + /** + * @private + */ + _getMaxOverflow: function() { + return false; + }, + _update: function(reset) { var me = this; me._configure(); me._cachedDataOpts = null; me.update(reset); + me._cachedMeta._clip = toClip(helpers.valueOrDefault(me._config.clip, defaultClip(me._xScale, me._yScale, me._getMaxOverflow()))); me._cacheScaleStackStatus(); }, diff --git a/src/elements/element.point.js b/src/elements/element.point.js index d985094dd..14849f9ae 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -53,6 +53,13 @@ class Point extends Element { }; } + size() { + var vm = this._view; + var radius = vm.radius || 0; + var borderWidth = vm.borderWidth || 0; + return (radius + borderWidth) * 2; + } + tooltipPosition() { var vm = this._view; return { diff --git a/test/fixtures/controller.bubble/clip.js b/test/fixtures/controller.bubble/clip.js new file mode 100644 index 000000000..9502ad1cd --- /dev/null +++ b/test/fixtures/controller.bubble/clip.js @@ -0,0 +1,35 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 5, 10, 15, 20, 25, 30, 50, 55, 60], + datasets: [{ + data: [6, 11, 10, 10, 3, 22, 7, 24], + type: 'bubble', + label: 'test', + borderColor: '#3e95cd', + fill: false + }] + }, + options: { + legend: false, + scales: { + xAxes: [{ticks: {display: false}}], + yAxes: [{ + ticks: { + display: false, + min: 8, + max: 25, + beginAtZero: true + } + }] + } + } + }, + options: { + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/controller.bubble/clip.png b/test/fixtures/controller.bubble/clip.png new file mode 100644 index 000000000..2c2c454de Binary files /dev/null and b/test/fixtures/controller.bubble/clip.png differ diff --git a/test/fixtures/controller.bubble/point-style.json b/test/fixtures/controller.bubble/point-style.json index a64507516..9849eef8c 100644 --- a/test/fixtures/controller.bubble/point-style.json +++ b/test/fixtures/controller.bubble/point-style.json @@ -44,7 +44,7 @@ {"x": 9, "y": 2} ], "backgroundColor": "transparent", - "borderColor": "0000ff", + "borderColor": "#0000ff", "borderWidth": 0, "pointStyle": [ "circle", diff --git a/test/fixtures/controller.line/clip/default-x-max.json b/test/fixtures/controller.line/clip/default-x-max.json new file mode 100644 index 000000000..f69182d1f --- /dev/null +++ b/test/fixtures/controller.line/clip/default-x-max.json @@ -0,0 +1,38 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [{ + "borderColor": "red", + "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}], + "fill": false, + "showLine": true, + "borderWidth": 20, + "pointRadius": 0 + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{ + "ticks": { + "max": 3, + "display": false + } + }], + "yAxes": [{"ticks": {"display": false}}] + }, + "layout": { + "padding": 24 + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/default-x-max.png b/test/fixtures/controller.line/clip/default-x-max.png new file mode 100644 index 000000000..18a4eb29a Binary files /dev/null and b/test/fixtures/controller.line/clip/default-x-max.png differ diff --git a/test/fixtures/controller.line/clip/default-x-min.json b/test/fixtures/controller.line/clip/default-x-min.json new file mode 100644 index 000000000..b4a4b0c3e --- /dev/null +++ b/test/fixtures/controller.line/clip/default-x-min.json @@ -0,0 +1,38 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [{ + "borderColor": "red", + "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}], + "fill": false, + "showLine": true, + "borderWidth": 20, + "pointRadius": 0 + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{ + "ticks": { + "min": -2, + "display": false + } + }], + "yAxes": [{"ticks": {"display": false}}] + }, + "layout": { + "padding": 24 + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/default-x-min.png b/test/fixtures/controller.line/clip/default-x-min.png new file mode 100644 index 000000000..44dce35d7 Binary files /dev/null and b/test/fixtures/controller.line/clip/default-x-min.png differ diff --git a/test/fixtures/controller.line/clip/default-x.json b/test/fixtures/controller.line/clip/default-x.json new file mode 100644 index 000000000..79dc08cd9 --- /dev/null +++ b/test/fixtures/controller.line/clip/default-x.json @@ -0,0 +1,39 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [{ + "borderColor": "red", + "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}], + "fill": false, + "showLine": true, + "borderWidth": 20, + "pointRadius": 0 + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{ + "ticks": { + "min": -2, + "max": 3, + "display": false + } + }], + "yAxes": [{"ticks": {"display": false}}] + }, + "layout": { + "padding": 24 + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/default-x.png b/test/fixtures/controller.line/clip/default-x.png new file mode 100644 index 000000000..70ad431e8 Binary files /dev/null and b/test/fixtures/controller.line/clip/default-x.png differ diff --git a/test/fixtures/controller.line/clip/default-y-max.json b/test/fixtures/controller.line/clip/default-y-max.json new file mode 100644 index 000000000..1ab631bb4 --- /dev/null +++ b/test/fixtures/controller.line/clip/default-y-max.json @@ -0,0 +1,38 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [{ + "borderColor": "red", + "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}], + "fill": false, + "showLine": true, + "borderWidth": 20, + "pointRadius": 0 + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{"ticks": {"display": false}}], + "yAxes": [{ + "ticks": { + "max": 6, + "display": false + } + }] + }, + "layout": { + "padding": 24 + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/default-y-max.png b/test/fixtures/controller.line/clip/default-y-max.png new file mode 100644 index 000000000..1089e94bd Binary files /dev/null and b/test/fixtures/controller.line/clip/default-y-max.png differ diff --git a/test/fixtures/controller.line/clip/default-y-min.json b/test/fixtures/controller.line/clip/default-y-min.json new file mode 100644 index 000000000..7c6114a9c --- /dev/null +++ b/test/fixtures/controller.line/clip/default-y-min.json @@ -0,0 +1,38 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [{ + "borderColor": "red", + "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}], + "fill": false, + "showLine": true, + "borderWidth": 20, + "pointRadius": 0 + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{"ticks": {"display": false}}], + "yAxes": [{ + "ticks": { + "min": 2, + "display": false + } + }] + }, + "layout": { + "padding": 24 + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/default-y-min.png b/test/fixtures/controller.line/clip/default-y-min.png new file mode 100644 index 000000000..7ae2e6510 Binary files /dev/null and b/test/fixtures/controller.line/clip/default-y-min.png differ diff --git a/test/fixtures/controller.line/clip/default-y.json b/test/fixtures/controller.line/clip/default-y.json new file mode 100644 index 000000000..30751446a --- /dev/null +++ b/test/fixtures/controller.line/clip/default-y.json @@ -0,0 +1,39 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [{ + "borderColor": "red", + "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}], + "fill": false, + "showLine": true, + "borderWidth": 20, + "pointRadius": 0 + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{"ticks": {"display": false}}], + "yAxes": [{ + "ticks": { + "min": 2, + "max": 6, + "display": false + } + }] + }, + "layout": { + "padding": 24 + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/default-y.png b/test/fixtures/controller.line/clip/default-y.png new file mode 100644 index 000000000..6a1e9816f Binary files /dev/null and b/test/fixtures/controller.line/clip/default-y.png differ diff --git a/test/fixtures/controller.line/clip/specified.json b/test/fixtures/controller.line/clip/specified.json new file mode 100644 index 000000000..5885240c7 --- /dev/null +++ b/test/fixtures/controller.line/clip/specified.json @@ -0,0 +1,77 @@ +{ + "config": { + "type": "scatter", + "data": { + "datasets": [ + { + "showLine": true, + "borderColor": "red", + "data": [{"x":-4,"y":-4},{"x":4,"y":4}], + "clip": false + }, + { + "showLine": true, + "borderColor": "green", + "data": [{"x":-4,"y":-5},{"x":4,"y":3}], + "clip": 5 + }, + { + "showLine": true, + "borderColor": "blue", + "data": [{"x":-4,"y":-3},{"x":4,"y":5}], + "clip": -5 + }, + { + "showLine": true, + "borderColor": "brown", + "data": [{"x":-3,"y":-3},{"x":-1,"y":3},{"x":1,"y":-2},{"x":2,"y":3}], + "clip": { + "top": 8, + "left": false, + "right": -20, + "bottom": -20 + } + } + ] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scales": { + "xAxes": [{ + "ticks": { + "min": -2, + "max": 2, + "display": false + } + }], + "yAxes": [{ + "ticks": { + "min": -2, + "max": 2, + "display": false + } + }] + }, + "layout": { + "padding": 24 + }, + "elements": { + "line": { + "fill": false, + "borderWidth": 20 + }, + "point": { + "radius": 0 + } + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/controller.line/clip/specified.png b/test/fixtures/controller.line/clip/specified.png new file mode 100644 index 000000000..60e60b234 Binary files /dev/null and b/test/fixtures/controller.line/clip/specified.png differ