Chart.js: [BUG] Spacing between vertical bars with percentages set to 1

[GlebEliseev]

I am referencing #2216 since it is not working for me

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

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

Here is the codepen where spaces can be seen.

Is there a way to solve this?

Environment

• Chart.js version: 2.5.0
• Browser name and version: Google Chrome Version 56.0.2924.87

[etimberg]

I'm guessing this a numerical/rounding error with the pixel calculations

[aresn]

I did a little bit of digging and found out removing the Math.round inside DatasetScale.getPixelForValue function solves the problem. But it probably degrades the canvas performance because of sub-pixel rendering.

[sneilan]

Is there a way to override DatasetScale.getPixelForValue without modifying Chart.js?

[sneilan]

@aresn Is this how you modified the DatasetScale?

            var UserDefinedScaleDefaults = Chart.scaleService.getScaleDefaults("category");
            var UserDefinedScale = Chart.scaleService.getScaleConstructor("category").extend({
                // Used to get data value locations.  Value can either be an index or a numerical value
                getPixelForValue: function(value, index, datasetIndex, includeOffset) {
                    var me = this;
                    // 1 is added because we need the length but we have the indexes
                    var offsetAmt = Math.max((me.maxIndex + 1 - me.minIndex - ((me.options.gridLines.offsetGridLines) ? 0 : 1)), 1);

                    if (value !== undefined && isNaN(index)) {
                        var labels = me.getLabels();
                        var idx = labels.indexOf(value);
                        index = idx !== -1 ? idx : index;
                    }

                    if (me.isHorizontal()) {
                        var valueWidth = me.width / offsetAmt;
                        var widthOffset = (valueWidth * (index - me.minIndex));

                        if (me.options.gridLines.offsetGridLines && includeOffset || me.maxIndex === me.minIndex && includeOffset) {
                            widthOffset += (valueWidth / 2);
                        }

                        return me.left + widthOffset;
                    }
                    var valueHeight = me.height / offsetAmt;
                    var heightOffset = (valueHeight * (index - me.minIndex));

                    if (me.options.gridLines.offsetGridLines && includeOffset) {
                        heightOffset += (valueHeight / 2);
                    }

                    return me.top + heightOffset;
                },

            });
            Chart.scaleService.registerScaleType("user-defined", UserDefinedScale, UserDefinedScaleDefaults);