İlk temizlik tamamlandı bir önceki projeden

assets/chart/test/.eslintrc.yml

@@ -0,0 +1,18 @@
+parserOptions:
+  ecmaVersion: 5 # don't rely on default, since its changed by env: es6
+
+env:
+  es6: true # also changes default ecmaVersion to 6
+  jasmine: true
+
+globals:
+  acquireChart: true
+  Chart: true
+  moment: true
+  waitForResize: true
+
+# https://eslint.org/docs/rules/
+rules:
+  # Best Practices
+  complexity: 0
+  max-statements: 0

assets/chart/test/context.js

@@ -0,0 +1,138 @@
+// Code from https://stackoverflow.com/questions/4406864/html-canvas-unit-testing
+var Context = function() {
+	this._calls = []; // names/args of recorded calls
+	this._initMethods();
+
+	this._fillStyle = null;
+	this._lineCap = null;
+	this._lineDashOffset = null;
+	this._lineJoin = null;
+	this._lineWidth = null;
+	this._strokeStyle = null;
+	this._textAlign = null;
+
+	// Define properties here so that we can record each time they are set
+	Object.defineProperties(this, {
+		fillStyle: {
+			get: function() {
+				return this._fillStyle;
+			},
+			set: function(style) {
+				this._fillStyle = style;
+				this.record('setFillStyle', [style]);
+			}
+		},
+		lineCap: {
+			get: function() {
+				return this._lineCap;
+			},
+			set: function(cap) {
+				this._lineCap = cap;
+				this.record('setLineCap', [cap]);
+			}
+		},
+		lineDashOffset: {
+			get: function() {
+				return this._lineDashOffset;
+			},
+			set: function(offset) {
+				this._lineDashOffset = offset;
+				this.record('setLineDashOffset', [offset]);
+			}
+		},
+		lineJoin: {
+			get: function() {
+				return this._lineJoin;
+			},
+			set: function(join) {
+				this._lineJoin = join;
+				this.record('setLineJoin', [join]);
+			}
+		},
+		lineWidth: {
+			get: function() {
+				return this._lineWidth;
+			},
+			set: function(width) {
+				this._lineWidth = width;
+				this.record('setLineWidth', [width]);
+			}
+		},
+		strokeStyle: {
+			get: function() {
+				return this._strokeStyle;
+			},
+			set: function(style) {
+				this._strokeStyle = style;
+				this.record('setStrokeStyle', [style]);
+			}
+		},
+		textAlign: {
+			get: function() {
+				return this._textAlign;
+			},
+			set: function(align) {
+				this._textAlign = align;
+				this.record('setTextAlign', [align]);
+			}
+		}
+	});
+};
+
+Context.prototype._initMethods = function() {
+	// define methods to test here
+	// no way to introspect so we have to do some extra work :(
+	var me = this;
+	var methods = {
+		arc: function() {},
+		arcTo: function() {},
+		beginPath: function() {},
+		bezierCurveTo: function() {},
+		clearRect: function() {},
+		clip: function() {},
+		closePath: function() {},
+		fill: function() {},
+		fillRect: function() {},
+		fillText: function() {},
+		lineTo: function() {},
+		measureText: function(text) {
+			// return the number of characters * fixed size
+			return text ? {width: text.length * 10} : {width: 0};
+		},
+		moveTo: function() {},
+		quadraticCurveTo: function() {},
+		rect: function() {},
+		restore: function() {},
+		rotate: function() {},
+		save: function() {},
+		setLineDash: function() {},
+		stroke: function() {},
+		strokeRect: function() {},
+		setTransform: function() {},
+		translate: function() {},
+	};
+
+	Object.keys(methods).forEach(function(name) {
+		me[name] = function() {
+			me.record(name, arguments);
+			return methods[name].apply(me, arguments);
+		};
+	});
+};
+
+Context.prototype.record = function(methodName, args) {
+	this._calls.push({
+		name: methodName,
+		args: Array.prototype.slice.call(args)
+	});
+};
+
+Context.prototype.getCalls = function() {
+	return this._calls;
+};
+
+Context.prototype.resetCalls = function() {
+	this._calls = [];
+};
+
+module.exports = Context;

assets/chart/test/fixture.js

@@ -0,0 +1,85 @@
+/* global __karma__ */
+
+'use strict';
+
+var utils = require('./utils');
+
+function readFile(url, callback) {
+	var request = new XMLHttpRequest();
+	request.onreadystatechange = function() {
+		if (request.readyState === 4) {
+			return callback(request.responseText);
+		}
+	};
+
+	request.open('GET', url, false);
+	request.send(null);
+}
+
+function loadConfig(url, callback) {
+	var regex = /\.(json|js)$/i;
+	var matches = url.match(regex);
+	var type = matches ? matches[1] : 'json';
+	var cfg = null;
+
+	readFile(url, function(content) {
+		switch (type) {
+		case 'js':
+			// eslint-disable-next-line
+			cfg = new Function('"use strict"; var module = {};' + content + '; return module.exports;')();
+			break;
+		case 'json':
+			cfg = JSON.parse(content);
+			break;
+		default:
+		}
+
+		callback(cfg);
+	});
+}
+
+function specFromFixture(description, inputs) {
+	var input = inputs.js || inputs.json;
+	it(input, function(done) {
+		loadConfig(input, function(json) {
+			var chart = utils.acquireChart(json.config, json.options);
+			if (!inputs.png) {
+				fail('Missing PNG comparison file for ' + inputs.json);
+				done();
+			}
+
+			utils.readImageData(inputs.png, function(expected) {
+				expect(chart).toEqualImageData(expected, json);
+				utils.releaseChart(chart);
+				done();
+			});
+		});
+	});
+}
+
+function specsFromFixtures(path) {
+	var regex = new RegExp('(^/base/test/fixtures/' + path + '.+)\\.(png|json|js)');
+	var inputs = {};
+
+	Object.keys(__karma__.files || {}).forEach(function(file) {
+		var matches = file.match(regex);
+		var name = matches && matches[1];
+		var type = matches && matches[2];
+
+		if (name && type) {
+			inputs[name] = inputs[name] || {};
+			inputs[name][type] = file;
+		}
+	});
+
+	return function() {
+		Object.keys(inputs).forEach(function(key) {
+			specFromFixture(key, inputs[key]);
+		});
+	};
+}
+
+module.exports = {
+	specs: specsFromFixtures
+};
+

assets/chart/test/fixtures/controller.bar/backgroundColor/indexable.js

@@ -0,0 +1,52 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					backgroundColor: [
+						'#ff0000',
+						'#00ff00',
+						'#0000ff',
+						'#ffff00',
+						'#ff00ff',
+						'#000000'
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: [
+						'#ff88ff',
+						'#888888',
+						'#ff8800',
+						'#00ff88',
+						'#8800ff',
+						'#ffff88'
+					]
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/backgroundColor/scriptable.js

@@ -0,0 +1,57 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 0 ? '#00ff00'
+							: value > -8 ? '#0000ff'
+							: '#ff00ff';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff00ff'
+							: value > 0 ? '#0000ff'
+							: value > -8 ? '#ff0000'
+							: '#00ff00';
+					}
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/backgroundColor/value.js

@@ -0,0 +1,38 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					backgroundColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: '#00ff00'
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/bar-thickness-absolute.json

@@ -0,0 +1,45 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2017", "2018", "2019", "2024", "2025"],
+            "datasets": [{
+                "backgroundColor": "rgba(255, 99, 132, 0.5)",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "barThickness": 128,
+                "data": [1, null, 3, 4, 5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "offset": true,
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-flex-offset.json

@@ -0,0 +1,45 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2017", "2018", "2020", "2024", "2038"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "barThickness": "flex",
+                "data": [1, null, 3, 4, 5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "offset": true,
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-flex-single-reverse.json

@@ -0,0 +1,45 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "barThickness": "flex",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "data": [1]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels",
+                        "reverse": true
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-flex-single.json

@@ -0,0 +1,44 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "barThickness": "flex",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "data": [1]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-flex.json

@@ -0,0 +1,44 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2017", "2018", "2020", "2024", "2038"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "barThickness": "flex",
+                "data": [1, null, 3, 4, 5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-max.json

@@ -0,0 +1,44 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "maxBarThickness": 8,
+                "data": [1, null, 3, 4, 5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-min-interval.json

@@ -0,0 +1,43 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "data": [1, null, 3, 4, 5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-multiple.json

@@ -0,0 +1,53 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "datasets": {
+                "bar": {
+                    "barPercentage": 1,
+                    "categoryPercentage": 1
+                }
+            },
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-no-overlap.json

@@ -0,0 +1,53 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [
+                    {"y": "1", "t": "2016"},
+                    {"y": "2", "t": "2017"},
+                    {"y": "3", "t": "2017-08"},
+                    {"y": "4", "t": "2024"},
+                    {"y": "5", "t": "2030"}
+                ]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "datasets": {
+                "bar": {
+                    "barPercentage": 1,
+                    "categoryPercentage": 1
+                }
+            },
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY-MM"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-offset.json

@@ -0,0 +1,54 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "datasets": {
+                "bar": {
+                    "barPercentage": 1,
+                    "categoryPercentage": 1
+                }
+            },
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "offset": true,
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-per-dataset-stacked.json

@@ -0,0 +1,55 @@
+{
+    "config": {
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "type": "bar",
+                "barThickness": 16,
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "type": "bar",
+                "barThickness": 8,
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }, {
+                "type": "bar",
+                "barThickness": 4,
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "offset": true,
+                    "stacked": true,
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "stacked": true,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-per-dataset.json

@@ -0,0 +1,48 @@
+{
+    "config": {
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "type": "bar",
+                "barThickness": 16,
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "type": "bar",
+                "barThickness": 8,
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "offset": true,
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-reverse.json

@@ -0,0 +1,54 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "datasets": {
+                "bar": {
+                    "barPercentage": 1,
+                    "categoryPercentage": 1
+                }
+            },
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels",
+                        "reverse": true
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-single-xy.json

@@ -0,0 +1,43 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "backgroundColor": "#FF6384",
+                "data": [{"x": "2022", "y": 42}]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-single.json

@@ -0,0 +1,44 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "barPercentage": 1,
+                "categoryPercentage": 1,
+                "backgroundColor": "#FF6384",
+                "data": [1]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels",
+                        "min": "2013"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/bar-thickness-stacked.json

@@ -0,0 +1,55 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "datasets": {
+                "bar": {
+                    "barPercentage": 1,
+                    "categoryPercentage": 1
+                }
+            },
+            "scales": {
+                "xAxes": [{
+                    "type": "time",
+                    "stacked": true,
+                    "display": false,
+                    "time": {
+                        "parser": "YYYY"
+                    },
+                    "ticks": {
+                        "source": "labels"
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "stacked": true,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/borderColor/indexable.js

@@ -0,0 +1,54 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderColor: [
+						'#ff0000',
+						'#00ff00',
+						'#0000ff',
+						'#ffff00',
+						'#ff00ff',
+						'#000000'
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: [
+						'#ff88ff',
+						'#888888',
+						'#ff8800',
+						'#00ff88',
+						'#8800ff',
+						'#ffff88'
+					],
+					borderWidth: 8
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderColor/scriptable.js

@@ -0,0 +1,59 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 0 ? '#00ff00'
+							: value > -8 ? '#0000ff'
+							: '#ff00ff';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff00ff'
+							: value > 0 ? '#0000ff'
+							: value > -8 ? '#ff0000'
+							: '#00ff00';
+					},
+					borderWidth: 8
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderColor/value.js

@@ -0,0 +1,40 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#00ff00',
+					borderWidth: 8
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderSkipped/indexable.js

@@ -0,0 +1,55 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: [
+						'top',
+						'top',
+						'right',
+						'right',
+						'bottom',
+						'left'
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderWidth: 8,
+					borderSkipped: [
+						'bottom',
+						'bottom',
+						'left',
+						'left',
+						'top',
+						'right'
+					]
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderSkipped/scriptable.js

@@ -0,0 +1,60 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? 'left'
+							: value > 0 ? 'right'
+							: value > -8 ? 'top'
+							: 'bottom';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderSkipped: function(ctx) {
+						var index = ctx.dataIndex;
+						return index > 4 ? 'left'
+							: index > 3 ? 'right'
+							: index > 1 ? 'top'
+							: 'bottom';
+					},
+					borderWidth: 8
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderSkipped/value.js

@@ -0,0 +1,56 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, -10, null],
+					borderSkipped: 'top'
+				},
+				{
+					// option in dataset
+					data: [0, 5, -10, null],
+					borderSkipped: 'right'
+				},
+				{
+					// option in dataset
+					data: [0, 5, -10, null],
+					borderSkipped: 'bottom'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, -10, null],
+				},
+				{
+					// option in dataset
+					data: [0, 5, -10, null],
+					borderSkipped: false
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderSkipped: 'left',
+					borderWidth: 8
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/indexable-object.js

@@ -0,0 +1,56 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: false,
+					borderWidth: [
+						{},
+						{bottom: 1, left: 1, top: 1, right: 1},
+						{bottom: 1, left: 2, top: 1, right: 2},
+						{bottom: 1, left: 3, top: 1, right: 3},
+						{bottom: 1, left: 4, top: 1, right: 4},
+						{bottom: 1, left: 5, top: 1, right: 5}
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#80808080',
+					borderSkipped: false,
+					borderWidth: [
+						{bottom: 1, left: 5, top: 1, right: 5},
+						{bottom: 1, left: 4, top: 1, right: 4},
+						{bottom: 1, left: 3, top: 1, right: 3},
+						{bottom: 1, left: 2, top: 1, right: 2},
+						{bottom: 1, left: 1, top: 1, right: 1},
+						{}
+					]
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/indexable.js

@@ -0,0 +1,54 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: [
+						0,
+						1,
+						2,
+						3,
+						4,
+						5
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderWidth: [
+						5,
+						4,
+						3,
+						2,
+						1,
+						0
+					]
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/negative.js

@@ -0,0 +1,49 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: -2
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				},
+				{
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: {left: -5, top: -5, bottom: -5, right: -5},
+					borderSkipped: false
+				},
+				{
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: {}
+				},
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: '#888',
+					borderColor: '#f00',
+					borderWidth: -4
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/object.js

@@ -0,0 +1,42 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: false,
+					borderWidth: {bottom: 1, left: 2, top: 3, right: 4}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderSkipped: false,
+					borderWidth: {bottom: 4, left: 3, top: 2, right: 1}
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/scriptable-object.js

@@ -0,0 +1,54 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: false,
+					borderWidth: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return {top: Math.abs(value)};
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#80808080',
+					borderSkipped: false,
+					borderWidth: function(ctx) {
+						return {left: ctx.dataIndex * 2};
+					}
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/scriptable.js

@@ -0,0 +1,52 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return Math.abs(value);
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderWidth: function(ctx) {
+						return ctx.dataIndex * 2;
+					}
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/borderWidth/value.js

@@ -0,0 +1,40 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: 2
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#888',
+					borderWidth: 4
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/chart-area-clip.js

@@ -0,0 +1,42 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 3, 4],
+			datasets: [
+				{
+					data: [5, 20, -5, -20],
+					borderColor: '#ff0000'
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			layout: {
+				padding: {
+					left: 0,
+					right: 0,
+					top: 50,
+					bottom: 50
+				}
+			},
+			elements: {
+				rectangle: {
+					backgroundColor: '#00ff00',
+					borderWidth: 8
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false, ticks: {min: -10, max: 10}}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json

@@ -0,0 +1,41 @@
+{
+    "config": {
+        "type": "horizontalBar",
+        "data": {
+            "labels": ["2030", "2034", "2038", "2042"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [11, [6,2], [-4,-7], -2]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [[1,2], [3,4], [-2,-3], [1,4]]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [[0,1], [1,2], [-2,-1], [1,-7]]
+            }]
+        },
+        "options": {
+            "title": false,
+            "legend": false,
+            "scales": {
+                "xAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "min": -8,
+                        "max": 12
+                    }
+                }],
+                "yAxes": [{
+                    "display": false
+                }]
+            }
+        }
+    },
+    "debug": false,
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json

@@ -0,0 +1,43 @@
+{
+    "config": {
+        "type": "horizontalBar",
+        "data": {
+            "labels": ["2030", "2034", "2038", "2042"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [11, [6,2], [-4,-7], -2]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [[1,2], [3,4], [-2,-3], [1,4]]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [[0,1], [1,2], [-2,-1], [1,-7]]
+            }]
+        },
+        "options": {
+            "title": false,
+            "legend": false,
+            "scales": {
+                "xAxes": [{
+                    "display": false,
+                    "stacked": true
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "stacked": true,
+                    "ticks": {
+                        "min": -8,
+                        "max": 12
+                    }
+                }]
+            }
+        }
+    },
+    "debug": false,
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/floatBar/float-bar-stacked.json

@@ -0,0 +1,43 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2030", "2034", "2038", "2042"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [11, [6,2], [-4,-7], -2]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [[1,2], [3,4], [-2,-3], [1,4]]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [[0,1], [1,2], [-2,-1], [1,-7]]
+            }]
+        },
+        "options": {
+            "title": false,
+            "legend": false,
+            "scales": {
+                "xAxes": [{
+                    "display": false,
+                    "stacked": true,
+                    "ticks": {
+                        "min": -8,
+                        "max": 12
+                    }
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "stacked": true
+                }]
+            }
+        }
+    },
+    "debug": false,
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/floatBar/float-bar.json

@@ -0,0 +1,41 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2030", "2034", "2038", "2042"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [11, [6,2], [-4,-7], -2]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [[1,2], [3,4], [-2,-3], [1,4]]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [[0,1], [1,2], [-2,-1], [1,-7]]
+            }]
+        },
+        "options": {
+            "title": false,
+            "legend": false,
+            "scales": {
+                "xAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "min": -8,
+                        "max": 12
+                    }
+                }],
+                "yAxes": [{
+                    "display": false
+                }]
+            }
+        }
+    },
+    "debug": false,
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/horizontal-borders.js

@@ -0,0 +1,42 @@
+module.exports = {
+	threshold: 0.01,
+	config: {
+		type: 'horizontalBar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderWidth: 2
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: false,
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: '#AAAAAA80',
+					borderColor: '#80808080',
+					borderWidth: {bottom: 6, left: 15, top: 6, right: 15}
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.bar/stacking/order-default.json

@@ -0,0 +1,42 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5]
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1]
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "display": false,
+                    "stacked": true
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "stacked": true,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bar/stacking/order-specified.json

@@ -0,0 +1,45 @@
+{
+    "config": {
+        "type": "bar",
+        "data": {
+            "labels": ["2016", "2018", "2020", "2024", "2030"],
+            "datasets": [{
+                "backgroundColor": "#FF6384",
+                "data": [1, null, 3, 4, 5],
+                "order": 20
+            }, {
+                "backgroundColor": "#36A2EB",
+                "data": [5, 4, 3, null, 1],
+                "order": 25
+            }, {
+                "backgroundColor": "#FFCE56",
+                "data": [3, 5, 2, null, 4],
+                "order": 10
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "display": false,
+                    "stacked": true
+                }],
+                "yAxes": [{
+                    "display": false,
+                    "stacked": true,
+                    "ticks": {
+                        "beginAtZero": true
+                    }
+                }]
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bubble/point-style.json

@@ -0,0 +1,129 @@
+{
+    "config": {
+        "type": "bubble",
+        "data": {
+            "datasets": [{
+                "data": [
+                    {"x": 0, "y": 3},
+                    {"x": 1, "y": 3},
+                    {"x": 2, "y": 3},
+                    {"x": 3, "y": 3},
+                    {"x": 4, "y": 3},
+                    {"x": 5, "y": 3},
+                    {"x": 6, "y": 3},
+                    {"x": 7, "y": 3},
+                    {"x": 8, "y": 3},
+                    {"x": 9, "y": 3}
+                ],
+                "backgroundColor": "#00ff00",
+                "borderColor": "transparent",
+                "borderWidth": 0,
+                "pointStyle": [
+                    "circle",
+                    "cross",
+                    "crossRot",
+                    "dash",
+                    "line",
+                    "rect",
+                    "rectRounded",
+                    "rectRot",
+                    "star",
+                    "triangle"
+                ]
+            }, {
+                "data": [
+                    {"x": 0, "y": 2},
+                    {"x": 1, "y": 2},
+                    {"x": 2, "y": 2},
+                    {"x": 3, "y": 2},
+                    {"x": 4, "y": 2},
+                    {"x": 5, "y": 2},
+                    {"x": 6, "y": 2},
+                    {"x": 7, "y": 2},
+                    {"x": 8, "y": 2},
+                    {"x": 9, "y": 2}
+                ],
+                "backgroundColor": "transparent",
+                "borderColor": "0000ff",
+                "borderWidth": 0,
+                "pointStyle": [
+                    "circle",
+                    "cross",
+                    "crossRot",
+                    "dash",
+                    "line",
+                    "rect",
+                    "rectRounded",
+                    "rectRot",
+                    "star",
+                    "triangle"
+                ]
+            }, {
+                "data": [
+                    {"x": 0, "y": 1},
+                    {"x": 1, "y": 1},
+                    {"x": 2, "y": 1},
+                    {"x": 3, "y": 1},
+                    {"x": 4, "y": 1},
+                    {"x": 5, "y": 1},
+                    {"x": 6, "y": 1},
+                    {"x": 7, "y": 1},
+                    {"x": 8, "y": 1},
+                    {"x": 9, "y": 1}
+                ],
+                "backgroundColor": "#00ff00",
+                "borderColor": "#0000ff",
+                "borderWidth": 0,
+                "pointStyle": [
+                    "circle",
+                    "cross",
+                    "crossRot",
+                    "dash",
+                    "line",
+                    "rect",
+                    "rectRounded",
+                    "rectRot",
+                    "star",
+                    "triangle"
+                ]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{"display": false}],
+                "yAxes": [{
+                    "display": false,
+                    "ticks": {
+                        "min": 0,
+                        "max": 4
+                    }
+                }]
+            },
+            "elements": {
+                "line": {
+                    "borderColor": "transparent",
+                    "borderWidth": 0,
+                    "fill": false
+                },
+                "point": {
+                    "radius": 16
+                }
+            },
+            "layout": {
+                "padding": {
+                    "left": 24,
+                    "right": 24
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

assets/chart/test/fixtures/controller.bubble/radius-scriptable.js

@@ -0,0 +1,45 @@
+module.exports = {
+	config: {
+		type: 'bubble',
+		data: {
+			datasets: [{
+				data: [
+					{x: 0, y: 0},
+					{x: 1, y: 0},
+					{x: 2, y: 0},
+					{x: 3, y: 0},
+					{x: 4, y: 0},
+					{x: 5, y: 0}
+				],
+				radius: function(ctx) {
+					return ctx.dataset.data[ctx.dataIndex].x * 4;
+				}
+			}]
+		},
+		options: {
+			legend: false,
+			title: false,
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			},
+			elements: {
+				point: {
+					backgroundColor: '#444'
+				}
+			},
+			layout: {
+				padding: {
+					left: 24,
+					right: 24
+				}
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 128,
+			width: 256
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/backgroundColor/indexable.js

@@ -0,0 +1,48 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					backgroundColor: [
+						'#ff0000',
+						'#00ff00',
+						'#0000ff',
+						'#ffff00',
+						'#ff00ff',
+						'#000000'
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: [
+						'#ff88ff',
+						'#888888',
+						'#ff8800',
+						'#00ff88',
+						'#8800ff',
+						'#ffff88'
+					]
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/backgroundColor/scriptable.js

@@ -0,0 +1,46 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 6 ? '#00ff00'
+							: value > 2 ? '#0000ff'
+							: '#ff00ff';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 6 ? '#00ff00'
+							: value > 2 ? '#0000ff'
+							: '#ff00ff';
+					}
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/backgroundColor/value.js

@@ -0,0 +1,34 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					backgroundColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: '#00ff00'
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/borderAlign/indexable.js

@@ -0,0 +1,52 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					borderAlign: [
+						'center',
+						'inner',
+						'center',
+						'inner',
+						'center',
+						'inner',
+					],
+					borderColor: '#00ff00'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: 'transparent',
+					borderColor: '#ff0000',
+					borderWidth: 5,
+					borderAlign: [
+						'center',
+						'inner',
+						'center',
+						'inner',
+						'center',
+						'inner',
+					]
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/borderAlign/scriptable.js

@@ -0,0 +1,44 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					borderAlign: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 4 ? 'inner' : 'center';
+					},
+					borderColor: '#0000ff',
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: 'transparent',
+					borderColor: '#ff00ff',
+					borderWidth: 8,
+					borderAlign: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 4 ? 'center' : 'inner';
+					}
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/borderAlign/value.js

@@ -0,0 +1,38 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					borderAlign: 'inner',
+					borderColor: '#00ff00',
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: 'transparent',
+					borderAlign: 'center',
+					borderColor: '#0000ff',
+					borderWidth: 4,
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

assets/chart/test/fixtures/controller.doughnut/borderColor/indexable.js

@@ -0,0 +1,50 @@
+module.exports = {
+	config: {
+		type: 'doughnut',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					borderColor: [
+						'#ff0000',
+						'#00ff00',
+						'#0000ff',
+						'#ffff00',
+						'#ff00ff',
+						'#000000'
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: 'transparent',
+					borderColor: [
+						'#ff88ff',
+						'#888888',
+						'#ff8800',
+						'#00ff88',
+						'#8800ff',
+						'#ffff88'
+					],
+					borderWidth: 8
+				}
+			},
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};