[Chartjs]-Getting rid of Chart.js canvas subpixels

Assuming you have only one color, you can do this by extending the chart and overriding the draw to do a getImageData, “rounding” (if the pixel has a R, G or B value, set it to the color) the pixel colors and a putImageData.

You could do this for multiple colors too but it becomes a tad complicated when there are two colors close by.

However the difference in bar value spacing you are seeing is because of the way Chart.js calculates the x position for the bars – there’s a rounding off that happens.

You can extend the chart and override the method that calculates the x position to get rid of the rounding off

Chart.types.Bar.extend({
    // Passing in a name registers this chart in the Chart namespace in the same way
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        // copy paste from library code with only 1 line changed
        this.scale.calculateX = function (index) {
            var isRotated = (this.xLabelRotation > 0),
                innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
                valueWidth = innerWidth / Math.max((this.valuesCount - ((this.offsetGridLines) ? 0 : 1)), 1),
                valueOffset = (valueWidth * index) + this.xScalePaddingLeft;

            if (this.offsetGridLines) {
                valueOffset += (valueWidth / 2);
            }

            // the library code rounds this off - we don't
            return valueOffset;
        }

        // render again because the original initialize call does a render
        // when animation is off this is the only render that happens
        this.render();
    }
});

You’d call it like so

var ctx = document.getElementById('canvas').getContext('2d');
var myBarChart = new Chart(ctx).BarAlt(data, {
     ...

Fiddle – http://jsfiddle.net/gf2c4ue4/

You can see the difference better if you zoom in.

The top one is the extended chart