diff --git a/docs/07-Advanced.md b/docs/07-Advanced.md index d040d4584..8bc94cc1f 100644 --- a/docs/07-Advanced.md +++ b/docs/07-Advanced.md @@ -360,6 +360,9 @@ The built in controller types are: * `Chart.controllers.polarArea` * `Chart.controllers.bubble` +#### Bar Controller +The bar controller has a special property that you should be aware of. To correctly calculate the width of a bar, the controller must determine the number of datasets that map to bars. To do this, the bar controller attaches a property `bar` to the dataset during initialization. If you are creating a replacement or updated bar controller, you should do the same. This will ensure that charts with regular bars and your new derived bars will work seamlessly. + ### Building Chart.js Chart.js uses gulp to build the library into a single JavaScript file. diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index c1c667d33..72e1fb9b7 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -31,16 +31,18 @@ }; Chart.controllers.bar = Chart.DatasetController.extend({ + initialize: function(chart, datasetIndex) { + Chart.DatasetController.prototype.initialize.call(this, chart, datasetIndex); + + // Use this to indicate that this is a bar dataset. + this.getDataset().bar = true; + }, // Get the number of datasets that display bars. We use this to correctly calculate the bar width getBarCount: function getBarCount() { var barCount = 0; helpers.each(this.chart.data.datasets, function(dataset) { - if (helpers.isDatasetVisible(dataset)) { - if (dataset.type === 'bar') { - ++barCount; - } else if (dataset.type === undefined && this.chart.config.type === 'bar') { - ++barCount; - } + if (helpers.isDatasetVisible(dataset) && dataset.bar) { + ++barCount; } }, this); return barCount; @@ -215,8 +217,7 @@ var barIndex = 0; for (var j = 0; j < datasetIndex; ++j) { - if (helpers.isDatasetVisible(this.chart.data.datasets[j]) && - (this.chart.data.datasets[j].type === 'bar' || (this.chart.data.datasets[j].type === undefined && this.chart.config.type === 'bar'))) { + if (helpers.isDatasetVisible(this.chart.data.datasets[j]) && this.chart.data.datasets[j].bar) { ++barIndex; } } diff --git a/test/controller.bar.tests.js b/test/controller.bar.tests.js index f01d9a301..97d39f71e 100644 --- a/test/controller.bar.tests.js +++ b/test/controller.bar.tests.js @@ -52,11 +52,10 @@ describe('Bar controller tests', function() { var chart = { data: { datasets: [{ - type: 'line' }, { - type: 'bar' + bar: true }, { - // no type, defaults to bar + bar: true }] }, config: { @@ -82,13 +81,13 @@ describe('Bar controller tests', function() { var chart = { data: { datasets: [{ - + bar: true, }, { + bar: true, hidden: true }, { - type: 'line' }, { - + bar: true, }] }, config: { @@ -148,7 +147,8 @@ describe('Bar controller tests', function() { data: [1, 2], label: 'dataset1', xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' + yAxisID: 'firstYScaleID', + bar: true }, { data: [10, 15, 0, -4], label: 'dataset2'