Chart.js: 2.0: Spacing between bars with percentages set to 1

[cpboyd]

The border width of the dataset is set to 0.
In options:

        scales: {
          xAxes: [{
            barPercentage: 1.0,
            categoryPercentage: 1.0,
            ...
          }]
        }

There's still thin lines randomly throughout the chart.
This is more noticeable as the number of entries increases (this chart normally has 1024 values).

I've also tried setting stacked: true on both axes, but this doesn't seem to have an impact.

Is there any work around to eliminate this spacing?

[etimberg]

@cpboyd I think this might be either

1. a rounding issue when determining the pixel values
2. Something to do with the border color.

Could you drop this in a JSFiddle?

[cpboyd]

@etimberg https://jsfiddle.net/33m4cf21/

I was thinking those too... Hence why I changed border width to 0.
I tried looking at the calculations, but didn't see anything immediately that would cause a rounding error. Both percentage values are 1 and I set stacked:true to possibly reduce the number of calculations (even though there's only one dataset).
(Even with floating point math, multiplying or dividing a number by 1 shouldn't have much impact.)

I noticed that removing the Y-axis label reduced the amount of spaces drastically.

So it seems that the Y-axis label has a big impact in causing this issue... Although, it still happens.

[cpboyd]

Actually... I'm not sure that the Y-axis label has much to do with it, after all.

I noticed that it's more about the width of the canvas, which does seem to hint at a possible rounding issue.

If you resize the window, the lines will increase/decrease in a periodic fashion ranging from zero lines up to a line between each bar and then back to zero lines.

[etimberg]

@cpboyd it looks like your fiddle is for a radar chart. Did you paste the wrong link?

I don't think we do a lot of rounding of pixel values. There are none in the Chart.elements.Rectangle object.

[cpboyd]

@etimberg
I'm not quite sure what happened there.

This should be correct, though: https://jsfiddle.net/ewqadp6t/

[cpboyd]

I've narrowed this down to the tickWidth calculation within getRuler:

var tickWidth = (function() {
    var min = xScale.getPixelForTick(1) - xScale.getPixelForTick(0);
    for (var i = 2; i < this.getDataset().data.length; i++) {
        min = Math.min(xScale.getPixelForTick(i) - xScale.getPixelForTick(i - 1), min);
    }
    return min;
}).call(this);

The issue is that it finds the smallest tickWidth and applies it uniformly, without changing the xScale at all.

Ideally, it seems like it would take this tickWidth and set the chart's width to tickWidth * datasetCount and then rescale the tickLeft calculations accordingly.

Or it could simply allow variable tickWidth. (Especially when variations are likely just a pixel different due to rounding.)

[etimberg]

@cpboyd Great find! I think it can be updated to support variable tick width. That would make the most sense to me. It could be a little weird on time scales, but we can cross that bridge when we come to it.

[etimberg]

@cpboyd I made some progress on this tonight. I still need to make sure I haven't broken anything for bars on time scales and do the same fix for the horizontal bar

Before

After

[edumbell]

This bug is back in version version: 2.7.2 - text on the chart is crisp, so it's not a canvas issue, but it's like the bars are using "pixels" which are larger than the pixels on my screen (much, much larger if I zoom in). Anyone have a workaround?