Chartjs grouped bars plots are overlapping

[vaasu070]

The same is asked in stackoverflow. but no luck there. As it is critical to our project and its quite urgent, so I am asking it here as well.

I am using react-chartjs-2 which is built around chart.js 2. Chartjs has rolled out version 3 with big changes but react-chartjs is yet to develop wrapper for chartjs-3.

I want to skip null values in grouped bar charts which otherwise leaves blank spaces. An option is added to chartjs-3 to skip null values but not in chartjs-2. when using chartjs-2 the plot looks as below with gaps for null values

So I am using this commit changes#7849 and making the same changes to chartjs-2.9.2. Bar width has increased to fill the area for null value but it is moved towards right and overlapping as below. Why is it behaving like this? Any help would be appreciated.

"use strict";

var DatasetController = require("../core/core.datasetController");
var defaults = require("../core/core.defaults");
var elements = require("../elements/index");
var helpers = require("../helpers/index");

var deprecated = helpers._deprecated;
var valueOrDefault = helpers.valueOrDefault;

defaults._set("bar", {
    hover: {
        mode: "label",
    },

    scales: {
        xAxes: [
            {
                type: "category",
                offset: true,
                gridLines: {
                    offsetGridLines: true,
                },
            },
        ],

        yAxes: [
            {
                type: "linear",
            },
        ],
    },
});

defaults._set("global", {
    datasets: {
        bar: {
            categoryPercentage: 0.8,
            barPercentage: 0.9,
        },
    },
});

/**
 * Computes the "optimal" sample size to maintain bars equally sized while preventing overlap.
 * @private
 */
function computeMinSampleSize(scale, pixels) {
    var min = scale._length;
    var prev, curr, i, ilen;

    for (i = 1, ilen = pixels.length; i < ilen; ++i) {
        min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
    }

    for (i = 0, ilen = scale.getTicks().length; i < ilen; ++i) {
        curr = scale.getPixelForTick(i);
        min = i > 0 ? Math.min(min, Math.abs(curr - prev)) : min;
        prev = curr;
    }

    return min;
}

/**
 * Computes an "ideal" category based on the absolute bar thickness or, if undefined or null,
 * uses the smallest interval (see computeMinSampleSize) that prevents bar overlapping. This
 * mode currently always generates bars equally sized (until we introduce scriptable options?).
 * @private
 */
function computeFitCategoryTraits(index, ruler, options, stackCount) {
    var thickness = options.barThickness;
    var curr = ruler.pixels[index];
    var min = helpers.isNullOrUndef(thickness)
        ? computeMinSampleSize(ruler.scale, ruler.pixels)
        : -1;
    var size, ratio;

    if (helpers.isNullOrUndef(thickness)) {
        size = min * options.categoryPercentage;
        ratio = options.barPercentage;
    } else {
        // When bar thickness is enforced, category and bar percentages are ignored.
        // Note(SB): we could add support for relative bar thickness (e.g. barThickness: '50%')
        // and deprecate barPercentage since this value is ignored when thickness is absolute.
        size = thickness * stackCount;
        ratio = 1;
    }

    return {
        chunk: size / stackCount,
        ratio: ratio,
        start: curr - size / 2,
    };
}

/**
 * Computes an "optimal" category that globally arranges bars side by side (no gap when
 * percentage options are 1), based on the previous and following categories. This mode
 * generates bars with different widths when data are not evenly spaced.
 * @private
 */
function computeFlexCategoryTraits(index, ruler, options, stackCount) {
    var pixels = ruler.pixels;
    var curr = pixels[index];
    var prev = index > 0 ? pixels[index - 1] : null;
    var next = index < pixels.length - 1 ? pixels[index + 1] : null;
    var percent = options.categoryPercentage;
    var start, size;

    if (prev === null) {
        // first data: its size is double based on the next point or,
        // if it's also the last data, we use the scale size.
        prev = curr - (next === null ? ruler.end - ruler.start : next - curr);
    }

    if (next === null) {
        // last data: its size is also double based on the previous point.
        next = curr + curr - prev;
    }

    start = curr - ((curr - Math.min(prev, next)) / 2) * percent;
    size = (Math.abs(next - prev) / 2) * percent;

    return {
        chunk: size / stackCount,
        ratio: options.barPercentage,
        start: start,
    };
}

module.exports = DatasetController.extend({
    dataElementType: elements.Rectangle,

    /**
     * @private
     */
    _dataElementOptions: [
        "backgroundColor",
        "borderColor",
        "borderSkipped",
        "borderWidth",
        "barPercentage",
        "barThickness",
        "categoryPercentage",
        "maxBarThickness",
        "minBarLength",
    ],

    initialize: function () {
        var me = this;
        var meta, scaleOpts;

        DatasetController.prototype.initialize.apply(me, arguments);

        meta = me.getMeta();
        meta.stack = me.getDataset().stack;
        meta.bar = true;

        scaleOpts = me._getIndexScale().options;
        deprecated(
            "bar chart",
            scaleOpts.barPercentage,
            "scales.[x/y]Axes.barPercentage",
            "dataset.barPercentage"
        );
        deprecated(
            "bar chart",
            scaleOpts.barThickness,
            "scales.[x/y]Axes.barThickness",
            "dataset.barThickness"
        );
        deprecated(
            "bar chart",
            scaleOpts.categoryPercentage,
            "scales.[x/y]Axes.categoryPercentage",
            "dataset.categoryPercentage"
        );
        deprecated(
            "bar chart",
            me._getValueScale().options.minBarLength,
            "scales.[x/y]Axes.minBarLength",
            "dataset.minBarLength"
        );
        deprecated(
            "bar chart",
            scaleOpts.maxBarThickness,
            "scales.[x/y]Axes.maxBarThickness",
            "dataset.maxBarThickness"
        );
    },

    update: function (reset) {
        var me = this;
        var rects = me.getMeta().data;
        var i, ilen;

        me._ruler = me.getRuler();

        for (i = 0, ilen = rects.length; i < ilen; ++i) {
            me.updateElement(rects[i], i, reset);
        }
    },

    updateElement: function (rectangle, index, reset) {
        var me = this;
        var meta = me.getMeta();
        var dataset = me.getDataset();
        var options = me._resolveDataElementOptions(rectangle, index);

        rectangle._xScale = me.getScaleForId(meta.xAxisID);
        rectangle._yScale = me.getScaleForId(meta.yAxisID);
        rectangle._datasetIndex = me.index;
        rectangle._index = index;
        rectangle._model = {
            backgroundColor: options.backgroundColor,
            borderColor: options.borderColor,
            borderSkipped: options.borderSkipped,
            borderWidth: options.borderWidth,
            datasetLabel: dataset.label,
            label: me.chart.data.labels[index],
        };

        if (helpers.isArray(dataset.data[index])) {
            rectangle._model.borderSkipped = null;
        }

        me._updateElementGeometry(rectangle, index, reset, options);

        rectangle.pivot();
    },

    /**
     * @private
     */
    _updateElementGeometry: function (rectangle, index, reset, options) {
        var me = this;
        var model = rectangle._model;
        var vscale = me._getValueScale();
        var base = vscale.getBasePixel();
        var horizontal = vscale.isHorizontal();
        var ruler = me._ruler || me.getRuler();
        var vpixels = me.calculateBarValuePixels(me.index, index, options);
        var ipixels = me.calculateBarIndexPixels(
            me.index,
            index,
            ruler,
            options
        );

        model.horizontal = horizontal;
        model.base = reset ? base : vpixels.base;
        model.x = horizontal ? (reset ? base : vpixels.head) : ipixels.center;
        model.y = horizontal ? ipixels.center : reset ? base : vpixels.head;
        model.height = horizontal ? ipixels.size : undefined;
        model.width = horizontal ? undefined : ipixels.size;
    },

    /**
     * Returns the stacks based on groups and bar visibility.
     * @param {number} [last] - The dataset index
     * @returns {string[]} The list of stack IDs
     * @private
     */
    _getStacks: function (last, dataIndex) {
        var me = this;
        var scale = me._getIndexScale();
        var metasets = scale._getMatchingVisibleMetas(me._type);
        var stacked = scale.options.stacked;
        var ilen = metasets.length;
        var stacks = [];
        var i, meta;

        for (i = 0; i < ilen; ++i) {
            meta = metasets[i];
            if (
                typeof dataIndex !== "undefined" &&
                helpers.isNullOrUndef(
                    me.chart.data.datasets[meta.index].data[dataIndex]
                )
            ) {
                continue;
            }
            // stacked   | meta.stack
            //           | found | not found | undefined
            // false     |   x   |     x     |     x
            // true      |       |     x     |
            // undefined |       |     x     |     x
            if (
                stacked === false ||
                stacks.indexOf(meta.stack) === -1 ||
                (stacked === undefined && meta.stack === undefined)
            ) {
                stacks.push(meta.stack);
            }
            if (meta.index === last) {
                break;
            }
        }
        return stacks;
    },

    /**
     * Returns the effective number of stacks based on groups and bar visibility.
     * @private
     */
    getStackCount: function (index) {
        return this._getStacks(undefined, index).length;
    },

    /**
     * Returns the stack index for the given dataset based on groups and bar visibility.
     * @param {number} [datasetIndex] - The dataset index
     * @param {string} [name] - The stack name to find
     * @returns {number} The stack index
     * @private
     */
    getStackIndex: function (datasetIndex, name) {
        var stacks = this._getStacks(datasetIndex);
        var index = name !== undefined ? stacks.indexOf(name) : -1; // indexOf returns -1 if element is not present

        return index === -1 ? stacks.length - 1 : index;
    },

    /**
     * @private
     */
    getRuler: function () {
        var me = this;
        var scale = me._getIndexScale();
        var pixels = [];
        var i, ilen;

        for (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {
            pixels.push(scale.getPixelForValue(null, i, me.index));
        }

        return {
            pixels: pixels,
            start: scale._startPixel,
            end: scale._endPixel,
            stackCount: me.getStackCount(),
            scale: scale,
        };
    },

    /**
     * Note: pixel values are not clamped to the scale area.
     * @private
     */
    calculateBarValuePixels: function (datasetIndex, index, options) {
        var me = this;
        var chart = me.chart;
        var scale = me._getValueScale();
        var isHorizontal = scale.isHorizontal();
        var datasets = chart.data.datasets;
        var metasets = scale._getMatchingVisibleMetas(me._type);
        var value = scale._parseValue(datasets[datasetIndex].data[index]);
        var minBarLength = options.minBarLength;
        var stacked = scale.options.stacked;
        var stack = me.getMeta().stack;
        var start =
            value.start === undefined
                ? 0
                : value.max >= 0 && value.min >= 0
                ? value.min
                : value.max;
        var length =
            value.start === undefined
                ? value.end
                : value.max >= 0 && value.min >= 0
                ? value.max - value.min
                : value.min - value.max;
        var ilen = metasets.length;
        var i, imeta, ivalue, base, head, size, stackLength;

        if (stacked || (stacked === undefined && stack !== undefined)) {
            for (i = 0; i < ilen; ++i) {
                imeta = metasets[i];

                if (imeta.index === datasetIndex) {
                    break;
                }

                if (imeta.stack === stack) {
                    stackLength = scale._parseValue(
                        datasets[imeta.index].data[index]
                    );
                    ivalue =
                        stackLength.start === undefined
                            ? stackLength.end
                            : stackLength.min >= 0 && stackLength.max >= 0
                            ? stackLength.max
                            : stackLength.min;

                    if (
                        (value.min < 0 && ivalue < 0) ||
                        (value.max >= 0 && ivalue > 0)
                    ) {
                        start += ivalue;
                    }
                }
            }
        }

        base = scale.getPixelForValue(start);
        head = scale.getPixelForValue(start + length);
        size = head - base;

        if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
            size = minBarLength;
            if (
                (length >= 0 && !isHorizontal) ||
                (length < 0 && isHorizontal)
            ) {
                head = base - minBarLength;
            } else {
                head = base + minBarLength;
            }
        }

        return {
            size: size,
            base: base,
            head: head,
            center: head + size / 2,
        };
    },

    /**
     * @private
     */
    calculateBarIndexPixels: function (datasetIndex, index, ruler, options) {
        var me = this;
        const stackCount = true ? me.getStackCount(index) : ruler.stackCount;

        var range =
            options.barThickness === "flex"
                ? computeFlexCategoryTraits(index, ruler, options, stackCount)
                : computeFitCategoryTraits(index, ruler, options, stackCount);

        var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);

        var center = range.start + range.chunk * stackIndex + range.chunk / 2;
        console.log(datasetIndex, index, stackIndex, center, range);
        var size = Math.min(
            valueOrDefault(options.maxBarThickness, Infinity),
            range.chunk * range.ratio
        );

        return {
            base: center - size / 2,
            head: center + size / 2,
            center: center,
            size: size,
        };
    },

    draw: function () {
        var me = this;
        var chart = me.chart;
        var scale = me._getValueScale();
        var rects = me.getMeta().data;
        var dataset = me.getDataset();
        var ilen = rects.length;
        var i = 0;

        helpers.canvas.clipArea(chart.ctx, chart.chartArea);

        for (; i < ilen; ++i) {
            var val = scale._parseValue(dataset.data[i]);
            if (!isNaN(val.min) && !isNaN(val.max)) {
                rects[i].draw();
            }
        }

        helpers.canvas.unclipArea(chart.ctx);
    },

    /**
     * @private
     */
    _resolveDataElementOptions: function () {
        var me = this;
        var values = helpers.extend(
            {},
            DatasetController.prototype._resolveDataElementOptions.apply(
                me,
                arguments
            )
        );
        var indexOpts = me._getIndexScale().options;
        var valueOpts = me._getValueScale().options;

        values.barPercentage = valueOrDefault(
            indexOpts.barPercentage,
            values.barPercentage
        );
        values.barThickness = valueOrDefault(
            indexOpts.barThickness,
            values.barThickness
        );
        values.categoryPercentage = valueOrDefault(
            indexOpts.categoryPercentage,
            values.categoryPercentage
        );
        values.maxBarThickness = valueOrDefault(
            indexOpts.maxBarThickness,
            values.maxBarThickness
        );
        values.minBarLength = valueOrDefault(
            valueOpts.minBarLength,
            values.minBarLength
        );

        return values;
    },
});

[Redbeardjunior]

Did you head any luck on this ?

[Udemology]

See if this would work: https://www.youtube.com/watch?v=4yET6a8uX6U&ab_channel=ChartJS

This is build in Chart.js 4 but it is basically a custom plugin which might also be possible on older versions.