diff --git a/samples/bar-multi-axis.html b/samples/bar-multi-axis.html
index 6ae6eca45..b8c3a384d 100644
--- a/samples/bar-multi-axis.html
+++ b/samples/bar-multi-axis.html
@@ -19,6 +19,9 @@
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
+ var randomColor = function() {
+ return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+ };
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
@@ -34,7 +37,7 @@
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: 'Dataset 3',
- backgroundColor: "rgba(151,187,205,0.5)",
+ backgroundColor: [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()],
yAxisID: "y-axis-1",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
@@ -120,7 +123,12 @@
$('#randomizeData').click(function() {
$.each(barChartData.datasets, function(i, dataset) {
- dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+ if (Chart.helpers.isArray(dataset.backgroundColor)) {
+ dataset.backgroundColor= [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()];
+ } else {
+ dataset.backgroundColor= randomColor();
+ }
+
dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
});
diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index 77e3de354..e15260dc4 100644
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -124,9 +124,60 @@
_options: this.options,
}, this);
+ // Need to fit scales before we reset elements.
+ Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+ // So that we animate from the baseline
+ this.resetElements();
+
// Update the chart with the latest data.
this.update();
},
+ resetElements: function() {
+ // Update the points
+ this.eachElement(function(bar, index, dataset, datasetIndex) {
+ var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+ var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+ var yScalePoint;
+
+ if (yScale.min < 0 && yScale.max <0) {
+ // all less than 0. use the top
+ yScalePoint = yScale.getPixelForValue(yScale.max);
+ } else if (yScale.min > 0 && yScale.max > 0) {
+ yScalePoint = yScale.getPixelForValue(yScale.min);
+ } else {
+ yScalePoint = yScale.getPixelForValue(0);
+ }
+
+ helpers.extend(bar, {
+ // Utility
+ _chart: this.chart,
+ _xScale: xScale,
+ _yScale: yScale,
+ _datasetIndex: datasetIndex,
+ _index: index,
+
+ // Desired view properties
+ _model: {
+ x: xScale.calculateBarX(this.data.datasets.length, datasetIndex, index),
+ y: yScalePoint,
+
+ // Appearance
+ base: yScale.calculateBarBase(datasetIndex, index),
+ width: xScale.calculateBarWidth(this.data.datasets.length),
+ backgroundColor: bar.custom && bar.custom.backgroundColor ? bar.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].backgroundColor, index, this.options.elements.bar.backgroundColor),
+ borderColor: bar.custom && bar.custom.borderColor ? bar.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderColor, index, this.options.elements.bar.borderColor),
+ borderWidth: bar.custom && bar.custom.borderWidth ? bar.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderWidth, index, this.options.elements.bar.borderWidth),
+
+ // Tooltip
+ label: this.data.labels[index],
+ datasetLabel: this.data.datasets[datasetIndex].label,
+ },
+ });
+ bar.pivot();
+ }, this);
+ },
update: function() {
// Update the scale sizes
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);