Cannot set label colors to a different color than the edge *and* label colors change on zoom

[mikebski]

• Sigma.js version : 2.4.0
• Graphology version : 0.25.4
• Operating system: Mac OS
• Web browser: FF 133.0.3
• See example code - it's a self-contained example
• 1. Labels should be rendered in black and not change colors
• 2. Labels are initially rendered as the same color as their edge, when resizing the labels all change to the same color, which is the color of the last edge added in the code (see small example below).

Steps to reproduce: Click here and resize with the mouse/zoom feature and watch the label color get messed up. It also sets the labelColor and the global label color but neither of those work. Note that if you switch the order that the edges are added the final label color follows that.

https://codesandbox.io/p/sandbox/sigma-template-forked-znjq75

[mikebski]

Looking at the source, if I change my settings to this I get all black labels, so that is OK:

const settings = {
        renderEdgeLabels: true,
        renderer: {
            container: document.getElementById('sigma-container'),
            type: 'canvas'
        },
        edgeLabelColor: { color: '#000'}
    };

However, the point still stands that I can't set individual edge label colors - they are all the same color as the last one added...

[jacomyal]

Hi @mikebski,

There are multiple different topics here. First, there are multiple issues in your code sample:

1. Directly mutating the sigmaInstance.settings will modify the settings indeed, but sigma will not catch it. This explains why the color changes after interacting with sigma. The proper way to update sigma's settings is to use the methods setSetting, setSettings or updateSetting
2. The renderer object in your settings definition is useless now, and looks a lot like some things that were recognized in sigma version 1, before we dropped the canvas (ie no WebGL) support
3. The edgeLabelColor setting has to be either shaped as { color: '#000' } (as in your first example), or as { attribute: 'labelColor', color: '#000' } (in which case, color is the default/fallback labels color, for those who do not have proper labelColor values)

There is absolutely no proper documentation on this polymorphism for the edgeLabelColor setting (nor for the similar labelColor, actually). I'll add some in the Customizing graph appearance as soon as I can.

Finally, you'll find an updated code example, with edge label colors varying from one edge to the other here:
https://codesandbox.io/p/sandbox/sigma-template-forked-hhmhwf?workspaceId=ws_Ub8bt8UqyvL7Az1n95VznD

This should help you solve your issues. I hope this helps!