updateSeries during onclick event of a chart column works as expected only when debugging in Chrome

Question

Using dojo, I create a chart with ColumnsPlot. The chart is created and displayed the way I want it. In order to handle a click on a column and to change the color of the clicked column I have the code below:

var handler = barChart.connectToPlot("default", function (event) {
  if (event.type == "onclick") {                     
    var currentSeriesData = event.run.data;                            
    barChart.updateSeries("Yearly Offense Count", reverseColors(currentSeriesData, event.index));
    barChart.render();
  }
});

And the reverseColors is:

reverseColors = function (data, index) {
        var tempData = [];
        for (var i = 0; i < data.length; i++) {
            tempData.push(data[i]);
            if (i == index) {
                tempData[i].fill = "red";
            } else {
                tempData[i].fill = "green";
            }
        }
        console.log(i + " - " + tempData[i].fill);
        return tempData;
    }

I am testing in Google and using the Developers Tools to debug. If I set a break point inside the if statement and debug the app, the barChart is updated and the clicked columns get a red color, and all the others are green (as desired). If I am not debugging, the barChart is updated, but all columns are green (originally chart is created with all green columns except one red column).

The reverseColors function returns the data in the correct format and wiht the correct fill while debugging, and when not debugging in the console I have 1 red and the rest of the items are green, as expected. But my chart has only green columns.

What am I messing up?

Dojo beginner!

Edit: Doesn't work in Chrome, works once in a blue moon in Firefox, and works fine is IE8.

Answer 1

The chart had a Highlight defined. Removing the Highlight solved the problem.