Spurious bars created when used with bar chart

[ukch]

I am using the following code to generate a bar chart whose negative values are black:

$(function() {
        var data = [[0, 1], [1, 3], [4, 2], [3, 6], [2, -3], [5, -7], [6, -2],
                    [7, 6]];
        var ticks = [[0, "a"], [1, "c"], [2, "b"], [3, "e"], [4, "d"],
                     [5, "g"], [6, "f"], [7, "h"]];
        var options = {"colors": ["#1f77b4"], "legend": {"show": true},
                       "xaxis": {"tickColor": "#DDDDDD", "ticks": ticks,
                                 "tickLength": 0},
                       "yaxis": {"tickColor": "#DDDDDD"}};

    $.plot($("#placeholder"),
           [{"bars": {"align": "center", "fill": 1, "barWidth": 0.9,
                      "show": true},
             "constraints": [{threshold: 0, color: "#000000",
                              evaluate: function(y, threshold) {
                                return y <= threshold}}],
             "data": data}],
            options);
});

The end result has 2 strange bars added, of size 0, as seen here:

If we change the threshold to 2, this becomed much more apparent:

[chr-dev]

Hi,

what happens if you sort your data array according the ticks?
[[0, 1], [1, 3], [2, -3], [3, 6], [4, 2], [5, -7], [6, -2], [7, 6]] instead of
[[0, 1], [1, 3], [4, 2], [3, 6], [2, -3], [5, -7], [6, -2], [7, 6]]

BR, Chris

[ukch]

The left-most black bar is extended slightly. See http://jsfiddle.net/3P56e/

[chr-dev]

puh, very strange! I also tried to add the missing semicolon behind "return y <= threshold" and the attributes threshold, date without quotation marks, but also no success... :-/

[chr-dev]

hm, "funny"... look here: http://jsfiddle.net/3P56e/43/
The horizontal (!) position of the additional strange bar is dependent of threshold value and the data values. In the above example, the position is centered between the two bars (value 1 and 4, sum = 5), if value is 2.5. if 1.5 the "threshold-bar" is positioned more to the left. :-O