]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Make bar styling options scriptable (#5780)
authorSimon Brunel <simonbrunel@users.noreply.github.com>
Mon, 12 Nov 2018 20:15:37 +0000 (21:15 +0100)
committerGitHub <noreply@github.com>
Mon, 12 Nov 2018 20:15:37 +0000 (21:15 +0100)
The bar `backgroundColor`, `borderColor`, `borderWidth` and `borderSkipped` options are now scriptable (unit tests, docs and a basic sample). Also fix the gulp task that generates the documentation on Windows.

31 files changed:
docs/charts/bar.md
gulpfile.js
samples/samples.js
samples/scriptable/bar.html [new file with mode: 0644]
samples/utils.js
src/controllers/controller.bar.js
src/controllers/controller.bubble.js
test/fixtures/controller.bar/backgroundColor/indexable.js [new file with mode: 0644]
test/fixtures/controller.bar/backgroundColor/indexable.png [new file with mode: 0644]
test/fixtures/controller.bar/backgroundColor/scriptable.js [new file with mode: 0644]
test/fixtures/controller.bar/backgroundColor/scriptable.png [new file with mode: 0644]
test/fixtures/controller.bar/backgroundColor/value.js [new file with mode: 0644]
test/fixtures/controller.bar/backgroundColor/value.png [new file with mode: 0644]
test/fixtures/controller.bar/borderColor/indexable.js [new file with mode: 0644]
test/fixtures/controller.bar/borderColor/indexable.png [new file with mode: 0644]
test/fixtures/controller.bar/borderColor/scriptable.js [new file with mode: 0644]
test/fixtures/controller.bar/borderColor/scriptable.png [new file with mode: 0644]
test/fixtures/controller.bar/borderColor/value.js [new file with mode: 0644]
test/fixtures/controller.bar/borderColor/value.png [new file with mode: 0644]
test/fixtures/controller.bar/borderSkipped/indexable.js [new file with mode: 0644]
test/fixtures/controller.bar/borderSkipped/indexable.png [new file with mode: 0644]
test/fixtures/controller.bar/borderSkipped/scriptable.js [new file with mode: 0644]
test/fixtures/controller.bar/borderSkipped/scriptable.png [new file with mode: 0644]
test/fixtures/controller.bar/borderSkipped/value.js [new file with mode: 0644]
test/fixtures/controller.bar/borderSkipped/value.png [new file with mode: 0644]
test/fixtures/controller.bar/borderWidth/indexable.js [new file with mode: 0644]
test/fixtures/controller.bar/borderWidth/indexable.png [new file with mode: 0644]
test/fixtures/controller.bar/borderWidth/scriptable.js [new file with mode: 0644]
test/fixtures/controller.bar/borderWidth/scriptable.png [new file with mode: 0644]
test/fixtures/controller.bar/borderWidth/value.js [new file with mode: 0644]
test/fixtures/controller.bar/borderWidth/value.png [new file with mode: 0644]

index b14afddee00227a7270e13e474c7b82e3c70ec58..e71c38e24ba2dbdd44861ab9ed8691d866990ce9 100644 (file)
@@ -61,31 +61,69 @@ var myBarChart = new Chart(ctx, {
 ```
 
 ## Dataset Properties
-The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bars is generally set this way.
 
-Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.
+The bar chart allows a number of properties to be specified for each dataset.
+These are used to set display properties for a specific dataset. For example,
+the color of the bars is generally set this way.
 
-| Name | Type | Description
-| ---- | ---- | -----------
-| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
-| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis.
-| `yAxisID` | `String` | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
-| `backgroundColor` | `Color/Color[]` | The fill color of the bar. See [Colors](../general/colors.md#colors).
-| `borderColor` | `Color/Color[]` | The color of the bar border. See [Colors](../general/colors.md#colors).
-| `borderWidth` | `Number/Number[]` | The stroke width of the bar in pixels.
-| `borderSkipped` | `String` | Which edge to skip drawing the border for. [more...](#borderskipped)
-| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered.
-| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the bars when hovered.
-| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the bars when hovered.
-
-### borderSkipped
-This setting is used to avoid drawing the bar stroke at the base of the fill. In general, this does not need to be changed except when creating chart types that derive from a bar chart.
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) |  Default
+| ---- | ---- | :----: | :----: | ----
+| [`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)'`
+| [`borderSkipped`](#borderskipped) | `String` | Yes | Yes | `'bottom'`
+| [`borderWidth`](#styling) | `Number` | Yes | Yes | `0`
+| [`data`](#data-structure) | `Object[]` | - | - | **required**
+| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | - | `undefined`
+| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | - | `undefined`
+| [`hoverBorderWidth`](#interactions) | `Number` | - | - | `1`
+| [`label`](#general) | `String` | - | - | `''`
+| [`xAxisID`](#general) | `String` | - | - | first x axis
+| [`yAxisID`](#general) | `String` | - | - | first y axis
+
+### General
+
+| Name | Description
+| ---- | ----
+| `label` | The label for the dataset which appears in the legend and tooltips.
+| `xAxisID` | The ID of the x axis to plot this dataset on.
+| `yAxisID` | The ID of the y axis to plot this dataset on.
+
+### Styling
+
+The style of each bar can be controlled with the following properties:
+
+| Name | Description
+| ---- | ----
+| `backgroundColor` | The bar background color.
+| `borderColor` | The bar border color.
+| [`borderSkipped`](#borderskipped) | The edge to skip when drawing bar.
+| `borderWidth` | The bar border width (in pixels).
+
+All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
+
+#### borderSkipped
+
+This setting is used to avoid drawing the bar stroke at the base of the fill.
+In general, this does not need to be changed except when creating chart types
+that derive from a bar chart.
 
 Options are:
-* 'bottom'
-* 'left'
-* 'top'
-* 'right'
+* `'bottom'`
+* `'left'`
+* `'top'`
+* `'right'`
+
+### Interactions
+
+The interaction with each bar can be controlled with the following properties:
+
+| Name | Description
+| ---- | -----------
+| `hoverBackgroundColor` | The bar background color when hovered.
+| `hoverBorderColor` | The bar border color hovered.
+| `hoverBorderWidth` | The bar border width when hovered (in pixels).
+
+All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
 
 ## Configuration Options
 
index 49fd66ade16330d425e9d676dde43300070328fd..d8872df0e3129c558fd060083b958ed9049e3603 100644 (file)
@@ -186,16 +186,16 @@ function lintHtmlTask() {
 }
 
 function docsTask(done) {
-  const script = require.resolve('gitbook-cli/bin/gitbook.js');
-  const cmd = process.execPath;
+  var script = require.resolve('gitbook-cli/bin/gitbook.js');
+  var cmd = '"' + process.execPath + '"';
 
   exec([cmd, script, 'install', './'].join(' ')).then(() => {
     return exec([cmd, script, argv.watch ? 'serve' : 'build', './', './dist/docs'].join(' '));
-  }).catch((err) => {
-    console.error(err.stdout);
   }).then(() => {
     done();
-  });
+  }).catch((err) => {
+    done(new Error(err.stdout || err));
+  })
 }
 
 function unittestTask(done) {
index b818827c6d24f510e95fb7e6c70aed0f83c1ad42..6edc62824238e32f6b037c069e536077521c3138 100644 (file)
        }, {
                title: 'Scriptable',
                items: [{
+                       title: 'Bar Chart',
+                       path: 'scriptable/bar.html'
+               }, {
                        title: 'Bubble Chart',
                        path: 'scriptable/bubble.html'
                }]
diff --git a/samples/scriptable/bar.html b/samples/scriptable/bar.html
new file mode 100644 (file)
index 0000000..ec7ac35
--- /dev/null
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+       <meta charset="utf-8">
+       <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Scriptable > Bar | Chart.js sample</title>
+       <link rel="stylesheet" type="text/css" href="../style.css">
+       <script src="../../dist/Chart.js"></script>
+       <script src="../utils.js"></script>
+</head>
+<body>
+       <div class="content">
+               <div class="wrapper"><canvas id="chart-0"></canvas></div>
+               <div class="toolbar">
+                       <button onclick="randomize(this)">Randomize</button>
+                       <button onclick="addDataset(this)">Add Dataset</button>
+                       <button onclick="removeDataset(this)">Remove Dataset</button>
+               </div>
+       </div>
+
+       <script>
+               var DATA_COUNT = 16;
+
+               var utils = Samples.utils;
+
+               utils.srand(110);
+
+               function colorize(opaque, ctx) {
+                       var v = ctx.dataset.data[ctx.dataIndex];
+                       var c = v < -50 ? '#D60000'
+                               : v < 0 ? '#F46300'
+                               : v < 50 ? '#0358B6'
+                               : '#44DE28';
+
+                       return opaque ? c : utils.transparentize(c, 1 - Math.abs(v / 150));
+               }
+
+               function generateData() {
+                       return utils.numbers({
+                               count: DATA_COUNT,
+                               min: -100,
+                               max: 100
+                       });
+               }
+
+               var data = {
+                       labels: utils.months({count: DATA_COUNT}),
+                       datasets: [{
+                               data: generateData()
+                       }]
+               };
+
+               var options = {
+                       legend: false,
+                       tooltips: false,
+                       elements: {
+                               rectangle: {
+                                       backgroundColor: colorize.bind(null, false),
+                                       borderColor: colorize.bind(null, true),
+                                       borderWidth: 2
+                               }
+                       }
+               };
+
+               var chart = new Chart('chart-0', {
+                       type: 'bar',
+                       data: data,
+                       options: options
+               });
+
+               // eslint-disable-next-line no-unused-vars
+               function randomize() {
+                       chart.data.datasets.forEach(function(dataset) {
+                               dataset.data = generateData();
+                       });
+                       chart.update();
+               }
+
+               // eslint-disable-next-line no-unused-vars
+               function addDataset() {
+                       chart.data.datasets.push({
+                               data: generateData()
+                       });
+                       chart.update();
+               }
+
+               // eslint-disable-next-line no-unused-vars
+               function removeDataset() {
+                       chart.data.datasets.shift();
+                       chart.update();
+               }
+       </script>
+</body>
+</html>
index 50bb81c0c1bf632539e31e69c70d13127272eb4d..71ac5e4e1221f8dc4fe51cefd1a8c68ddc70e2a6 100644 (file)
@@ -11,7 +11,7 @@ window.chartColors = {
 };
 
 (function(global) {
-       var Months = [
+       var MONTHS = [
                'January',
                'February',
                'March',
@@ -106,7 +106,7 @@ window.chartColors = {
                        var i, value;
 
                        for (i = 0; i < count; ++i) {
-                               value = Months[Math.ceil(i) % 12];
+                               value = MONTHS[Math.ceil(i) % 12];
                                values.push(value.substring(0, section));
                        }
 
index 74e6d2289f09d47d376ec5ed11a4c2074da9c4df..36f7c7e6e3749b713a5f11513f3e656e59a47af3 100644 (file)
@@ -213,27 +213,24 @@ module.exports = function(Chart) {
 
                updateElement: function(rectangle, index, reset) {
                        var me = this;
-                       var chart = me.chart;
                        var meta = me.getMeta();
                        var dataset = me.getDataset();
-                       var custom = rectangle.custom || {};
-                       var rectangleOptions = chart.options.elements.rectangle;
+                       var options = me._resolveElementOptions(rectangle, index);
 
                        rectangle._xScale = me.getScaleForId(meta.xAxisID);
                        rectangle._yScale = me.getScaleForId(meta.yAxisID);
                        rectangle._datasetIndex = me.index;
                        rectangle._index = index;
-
                        rectangle._model = {
+                               backgroundColor: options.backgroundColor,
+                               borderColor: options.borderColor,
+                               borderSkipped: options.borderSkipped,
+                               borderWidth: options.borderWidth,
                                datasetLabel: dataset.label,
-                               label: chart.data.labels[index],
-                               borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped,
-                               backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleOptions.backgroundColor),
-                               borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor),
-                               borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth)
+                               label: me.chart.data.labels[index]
                        };
 
-                       me.updateElementGeometry(rectangle, index, reset);
+                       me._updateElementGeometry(rectangle, index, reset);
 
                        rectangle.pivot();
                },
@@ -241,7 +238,7 @@ module.exports = function(Chart) {
                /**
                 * @private
                 */
-               updateElementGeometry: function(rectangle, index, reset) {
+               _updateElementGeometry: function(rectangle, index, reset) {
                        var me = this;
                        var model = rectangle._model;
                        var vscale = me.getValueScale();
@@ -472,6 +469,47 @@ module.exports = function(Chart) {
 
                        helpers.canvas.unclipArea(chart.ctx);
                },
+
+               /**
+                * @private
+                */
+               _resolveElementOptions: function(rectangle, index) {
+                       var me = this;
+                       var chart = me.chart;
+                       var datasets = chart.data.datasets;
+                       var dataset = datasets[me.index];
+                       var custom = rectangle.custom || {};
+                       var options = chart.options.elements.rectangle;
+                       var resolve = helpers.options.resolve;
+                       var values = {};
+                       var i, ilen, key;
+
+                       // Scriptable options
+                       var context = {
+                               chart: chart,
+                               dataIndex: index,
+                               dataset: dataset,
+                               datasetIndex: me.index
+                       };
+
+                       var keys = [
+                               'backgroundColor',
+                               'borderColor',
+                               'borderSkipped',
+                               'borderWidth'
+                       ];
+
+                       for (i = 0, ilen = keys.length; i < ilen; ++i) {
+                               key = keys[i];
+                               values[key] = resolve([
+                                       custom[key],
+                                       dataset[key],
+                                       options[key]
+                               ], context, index);
+                       }
+
+                       return values;
+               }
        });
 
        Chart.controllers.horizontalBar = Chart.controllers.bar.extend({
index f14e512300ff50ba5c4c7875addda3901989c813..ed1e2045c71416648a027001bf984a66e79e80cd 100644 (file)
@@ -103,12 +103,14 @@ module.exports = function(Chart) {
                setHoverStyle: function(point) {
                        var model = point._model;
                        var options = point._options;
+
                        point.$previousStyle = {
                                backgroundColor: model.backgroundColor,
                                borderColor: model.borderColor,
                                borderWidth: model.borderWidth,
                                radius: model.radius
                        };
+
                        model.backgroundColor = helpers.valueOrDefault(options.hoverBackgroundColor, helpers.getHoverColor(options.backgroundColor));
                        model.borderColor = helpers.valueOrDefault(options.hoverBorderColor, helpers.getHoverColor(options.borderColor));
                        model.borderWidth = helpers.valueOrDefault(options.hoverBorderWidth, options.borderWidth);
@@ -167,6 +169,7 @@ module.exports = function(Chart) {
                                dataset.radius,
                                options.radius
                        ], context, index);
+
                        return values;
                }
        });
diff --git a/test/fixtures/controller.bar/backgroundColor/indexable.js b/test/fixtures/controller.bar/backgroundColor/indexable.js
new file mode 100644 (file)
index 0000000..781f81b
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/backgroundColor/indexable.png b/test/fixtures/controller.bar/backgroundColor/indexable.png
new file mode 100644 (file)
index 0000000..eecc4ac
Binary files /dev/null and b/test/fixtures/controller.bar/backgroundColor/indexable.png differ
diff --git a/test/fixtures/controller.bar/backgroundColor/scriptable.js b/test/fixtures/controller.bar/backgroundColor/scriptable.js
new file mode 100644 (file)
index 0000000..b17349b
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/backgroundColor/scriptable.png b/test/fixtures/controller.bar/backgroundColor/scriptable.png
new file mode 100644 (file)
index 0000000..e78839a
Binary files /dev/null and b/test/fixtures/controller.bar/backgroundColor/scriptable.png differ
diff --git a/test/fixtures/controller.bar/backgroundColor/value.js b/test/fixtures/controller.bar/backgroundColor/value.js
new file mode 100644 (file)
index 0000000..d82d60d
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/backgroundColor/value.png b/test/fixtures/controller.bar/backgroundColor/value.png
new file mode 100644 (file)
index 0000000..4885e10
Binary files /dev/null and b/test/fixtures/controller.bar/backgroundColor/value.png differ
diff --git a/test/fixtures/controller.bar/borderColor/indexable.js b/test/fixtures/controller.bar/borderColor/indexable.js
new file mode 100644 (file)
index 0000000..de39b13
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderColor/indexable.png b/test/fixtures/controller.bar/borderColor/indexable.png
new file mode 100644 (file)
index 0000000..1a3a45c
Binary files /dev/null and b/test/fixtures/controller.bar/borderColor/indexable.png differ
diff --git a/test/fixtures/controller.bar/borderColor/scriptable.js b/test/fixtures/controller.bar/borderColor/scriptable.js
new file mode 100644 (file)
index 0000000..d4fefc7
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderColor/scriptable.png b/test/fixtures/controller.bar/borderColor/scriptable.png
new file mode 100644 (file)
index 0000000..c24a2be
Binary files /dev/null and b/test/fixtures/controller.bar/borderColor/scriptable.png differ
diff --git a/test/fixtures/controller.bar/borderColor/value.js b/test/fixtures/controller.bar/borderColor/value.js
new file mode 100644 (file)
index 0000000..4f328b5
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderColor/value.png b/test/fixtures/controller.bar/borderColor/value.png
new file mode 100644 (file)
index 0000000..6e17041
Binary files /dev/null and b/test/fixtures/controller.bar/borderColor/value.png differ
diff --git a/test/fixtures/controller.bar/borderSkipped/indexable.js b/test/fixtures/controller.bar/borderSkipped/indexable.js
new file mode 100644 (file)
index 0000000..405e6da
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderSkipped/indexable.png b/test/fixtures/controller.bar/borderSkipped/indexable.png
new file mode 100644 (file)
index 0000000..64bd848
Binary files /dev/null and b/test/fixtures/controller.bar/borderSkipped/indexable.png differ
diff --git a/test/fixtures/controller.bar/borderSkipped/scriptable.js b/test/fixtures/controller.bar/borderSkipped/scriptable.js
new file mode 100644 (file)
index 0000000..6801d95
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderSkipped/scriptable.png b/test/fixtures/controller.bar/borderSkipped/scriptable.png
new file mode 100644 (file)
index 0000000..5470838
Binary files /dev/null and b/test/fixtures/controller.bar/borderSkipped/scriptable.png differ
diff --git a/test/fixtures/controller.bar/borderSkipped/value.js b/test/fixtures/controller.bar/borderSkipped/value.js
new file mode 100644 (file)
index 0000000..139a2c6
--- /dev/null
@@ -0,0 +1,51 @@
+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],
+                               }
+                       ]
+               },
+               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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderSkipped/value.png b/test/fixtures/controller.bar/borderSkipped/value.png
new file mode 100644 (file)
index 0000000..56ef05a
Binary files /dev/null and b/test/fixtures/controller.bar/borderSkipped/value.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/indexable.js b/test/fixtures/controller.bar/borderWidth/indexable.js
new file mode 100644 (file)
index 0000000..ddd544f
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderWidth/indexable.png b/test/fixtures/controller.bar/borderWidth/indexable.png
new file mode 100644 (file)
index 0000000..30011d3
Binary files /dev/null and b/test/fixtures/controller.bar/borderWidth/indexable.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/scriptable.js b/test/fixtures/controller.bar/borderWidth/scriptable.js
new file mode 100644 (file)
index 0000000..4012865
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderWidth/scriptable.png b/test/fixtures/controller.bar/borderWidth/scriptable.png
new file mode 100644 (file)
index 0000000..fd8b193
Binary files /dev/null and b/test/fixtures/controller.bar/borderWidth/scriptable.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/value.js b/test/fixtures/controller.bar/borderWidth/value.js
new file mode 100644 (file)
index 0000000..33cd40f
--- /dev/null
@@ -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
+               }
+       }
+};
diff --git a/test/fixtures/controller.bar/borderWidth/value.png b/test/fixtures/controller.bar/borderWidth/value.png
new file mode 100644 (file)
index 0000000..3c81aff
Binary files /dev/null and b/test/fixtures/controller.bar/borderWidth/value.png differ