Issue #695 resolved

Horizontal Bar Chart Negative Series Colors Not Working

Geoffrey Ching
created an issue

Negative color series works for vertical bar charts, but doesn't appear to work for horizontal bar charts.

I dug around in the code a bit and made two changes to that made it work for me.

Line 516 of jqplot.barRenderer.js. this._data[i][1] is the y value, but as it is a horizontal bar chart, it should be the x value. I believe it should be this._data[i][0].

Also, the case for when varyBarColor is not true didn't exist, I copied lines 429-431 from the vertical bar chart code to right after line 524.

else { opts.fillStyle = negativeColor; }

Comments (3)

  1. Geoffrey Ching reporter

    You're right, that was a really inadequate description of the issue.

    Here's the code: http://jsfiddle.net/mSNGE/43/

    Charts 1 & 2 have varyBarColor set to true. As such, all positive bars should be colors in seriesColors (green & blue colors), while negative bars should be colors in negativeSeriesColors (red & yellow colors). As you can see with chart 1, this is the case. With chart 2 however, this is not.

    This is where Line 516 of BarRenderer.js comes in. Line 516 is part of the horizontal bar code. The corresponding line for vertical bars is at 420. These lines checks if fillToZero is true (negative bars exist) and whether a bar is negative. If you check, they are identical. However, because with vertical charts, it's the y-value that matters, but with horizontal charts, it's the x-value, the two lines of code shouldn't be the same. Since the data is in the format of [[x, y], [x, y], [x, y]], we can change this_.data[i][1] to this_.data[i][0] on line 516 to solve the problem.

    Here's the same example with a jqplot.BarRenderer that I modified: http://jsfiddle.net/fgxLf/4/

    However, there is still another problem, as charts 3 and 4 show. This occurs when varyBarColor is set to false. The positive bars should all be the first color in seriesColors (green) and the negative bars should all be first color in negativeSeriesColors (red). However, the negative colors are still green.

    Again, we can compare the vertical bar code with that of the horizontal bar code.

    Lines 420-432 for vertical charts:

    if ((this.fillToZero && this._plotData[i][1] < 0) || (this.waterfall && this._data[i][1] < 0)) {
        if (this.varyBarColor && !this._stack) {
            if (this.useNegativeColors) {
                opts.fillStyle = negativeColors.next();
            }
            else {
                opts.fillStyle = positiveColors.next();
            }
        }
        else {
            opts.fillStyle = negativeColor;
        }
    }
    

    And lines 516-525 for horizontal charts:

    if ((this.fillToZero && this._plotData[i][1] < 0) || (this.waterfall && this._data[i][1] < 0)) {
        if (this.varyBarColor && !this._stack) {
            if (this.useNegativeColors) {
                opts.fillStyle = negativeColors.next();
            }
            else {
                opts.fillStyle = positiveColors.next();
            }
        }
    }
    

    If you look closely, you'll see that there is no alternative case for when varyBarColor is false, and opts.fillStyle stays as the previous color, which is the positive color.

    This second issue can be easily solved by copying the alternative case from the vertical code to the horizontal code. (else { opts.fillStyle = negativeColor; } to right after line 524)

    Here's the example with both issues solved. http://jsfiddle.net/xKL2w/2/

    I hope this makes these issues clear.

  2. Log in to comment