Incorrect border highlight in Pie Charts

[Tutuchan]

Hello,

When creating a pie chart with a hoverBorderColor, not all wedges borders are higlighted on mouseover.

See here: https://output.jsbin.com/jezuce/1
Some borders are black when highlighted while others are not.

[etimberg]

@Tutuchan thanks for the report. I think the issue is draw order. The arcs are drawn clockwise so the 2nd arc overlaps one of the edges of the first arc.

[Tutuchan]

I tried to take a look at this problem but I'm not sure I'm in the right track as I'm not really proficient with JavaScript.

I modified the draw function in controller.dougnut.js to be able to take a lastIndex parameter in order to redraw one of the arcs after all the others:

draw: function(ease, lastIndex) {
    var easingDecimal = ease || 1;
    helpers.each(this.getMeta().data, function(arc, index) {
    arc.transition(easingDecimal).draw();
    });
    if (lastIndex) this.getMeta().data[lastIndex].draw()
}

Then, in core.controller.js, I added a call to the draw function when setting the hover styling:

// Built in hover styling
if (this.active.length && this.options.hover.mode) {
    switch (this.options.hover.mode) {
        case 'single':
            this.getDatasetMeta(this.active[0]._datasetIndex).controller.setHoverStyle(this.active[0]);
            this.getDatasetMeta(this.active[0]._datasetIndex).controller.draw(0, this.active[0]._index);
            break;
...

This seems to be more or less working but the hovered edges do not appear on first entering the wedge, only when moving the mouse around and even then not immediately.

I don't know how to create a jsbin with this modified version but I forked it there.

[etimberg]

@Tutuchan i think the angles in the doughnut controller need to be updated for the size of the border.

Chart.js/src/controllers/controller.doughnut.js

Line 236 in 7eb4731

arc._model.endAngle = arc._model.startAngle + arc._model.circumference;

The circumference is in radians, but somehow the border width should also be taken into account

[Tutuchan]

@etimberg I had some time to take a look at this and I'm not sure about the angles approach. The overlap between two segments is different on the inner radius and on the outer radius so even if you make it so the borders do not overlap near the outer radius, they will overlap near the inner one.

See here for example:

[knstntn]

+1

[steve231293]

Hi everyone, seem this bug is not fixed yet, any help?

[development-s365]

+1