I'm trying to implement my own hoverRenderer to make the highlight ring have multiple colors. So I took the drawHover in src/rendering/canvas/hover.ts line 58 and replaced

context.arc(data.x, data.y, data.size + PADDING, 0, Math.PI * 2);
context.closePath();
context.fill();

with

        const [fillStart, fillEnd, fillRadius] = [0, Math.PI * 2, data.size + PADDING];
        // compute segment arc radian
        const arcRadian = (fillEnd - fillStart) / data.highlightColor.length;

        // draw the highlight ring/arc in different colors specified in highlightColor
        for (let index = 0; index < data.highlightColor.length; index++) {
            context.arc(
                data.x,
                data.y,
                fillRadius + 5,
                fillStart,
                fillStart + arcRadian
            );
            context.fillStyle = data.highlightColor[index];
            context.fill();
            fillStart += arcRadian;
        }
        context.closePath();

Even though my data.highlightColor was set to ['#FF2301', '#D53032', '#2F4538'], the arc I got was still single colored. This post has a similar implementation and achieves the effect I want. Is there any restriction imposed by Sigma that prevents this?