score:3

Accepted answer

It's a known issue, and happens if you click on or near the boundary of two bars. See https://github.com/c3js/c3/issues/1658.

The way to 'fix' it is to slightly change the function that decides whether a mouseclick has occurred within a bar as below, see the offset value has been changed from 2 to -1. Now clicking on the boundary between two bars will get you no hits rather than two which may be preferable (I couldn't get a value of offset for it to just trigger one). The drawback here is that very, very narrow or short bars (< 3px in either dimension) will not report clicks at all.

chart.internal.isWithinBar = function (that) {
        var mouse = this.d3.mouse(that), box = that.getBoundingClientRect(),
            seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
            x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
            w = box.width, h = box.height, offset = /*2*/ -1,
            sx = x - offset, ex = x + w + offset, sy = y + h + offset, ey = y - offset;
        return sx < mouse[0] && mouse[0] < ex && ey < mouse[1] && mouse[1] < sy;
    };

Related Query

More Query from same tag