Hi, thanks for the useful library! Found what seems like a bug with edge label rendering. I am new to the library so may be a footgun instead of a bug but thought I would bring it to attention anyway.
When edges have the value property set (for edge width scaling) AND smooth edges are enabled, calling network.setOptions() to update the edge font size has no visual effect. The font size is correctly updated in the internal options but the edges are not re-rendered with the new font size.
Environment
vis-network version: 9.1.6
Browser: Firefox (also reproduced in Chrome)
OS: Linux
Minimal Reproduction
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vis-network@9.1.6/standalone/umd/vis-network.min.js"></script>
<style>
#mynetwork { width: 800px; height: 400px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h3>Bug: Edge value + smooth breaks font setOptions</h3>
<button onclick="updateFont(40)">Set Font Size to 40</button>
<button onclick="updateFont(14)">Set Font Size to 14</button>
<div id="mynetwork"></div>
<script>
// Edges with value property
const edges = new vis.DataSet([
{from: 1, to: 2, label: 'Edge A', value: 1}, // <-- value causes the bug
{from: 2, to: 3, label: 'Edge B', value: 2}
]);
const nodes = new vis.DataSet([
{id: 1, label: 'Node 1', x: -100, y: 0},
{id: 2, label: 'Node 2', x: 100, y: 0},
{id: 3, label: 'Node 3', x: 0, y: 100}
]);
const options = {
edges: {
font: { size: 14, align: 'top' },
smooth: { type: 'continuous', roundness: 0.5 } // <-- Also required to trigger bug
},
physics: { enabled: false }
};
const network = new vis.Network(
document.getElementById('mynetwork'),
{ nodes, edges },
options
);
function updateFont(size) {
console.log('Setting font size to:', size);
network.setOptions({
edges: { font: { size: size } }
});
network.redraw();
// Edge labels do not change size
}
</script>
</body>
</html>Expected Behavior
Clicking "Set Font Size to 40" should make the edge labels ("Edge A", "Edge B") visibly larger.
Actual Behavior
Edge labels remain the same size. Node labels and other edge properties (like color) update correctly, but font size does not.
Findings
The bug requires both:
- value property on edges
- smooth edges enabled
edges.update() also fails: Updating edges individually in the DataSet also doesn't re-render the font when these conditions are met.
Workaround
Use width property instead of value for edge thickness:
// Instead of:
{from: 1, to: 2, label: 'Edge', value: 3}
// Use:
{from: 1, to: 2, label: 'Edge', width: 2 + 3} // Calculate width directly.
Hi, thanks for the useful library! Found what seems like a bug with edge label rendering. I am new to the library so may be a footgun instead of a bug but thought I would bring it to attention anyway.
When edges have the value property set (for edge width scaling) AND smooth edges are enabled, calling network.setOptions() to update the edge font size has no visual effect. The font size is correctly updated in the internal options but the edges are not re-rendered with the new font size.
Environment
vis-network version: 9.1.6
Browser: Firefox (also reproduced in Chrome)
OS: Linux
Minimal Reproduction
Expected Behavior
Clicking "Set Font Size to 40" should make the edge labels ("Edge A", "Edge B") visibly larger.
Actual Behavior
Edge labels remain the same size. Node labels and other edge properties (like color) update correctly, but font size does not.
Findings
The bug requires both:
edges.update() also fails: Updating edges individually in the DataSet also doesn't re-render the font when these conditions are met.
Workaround
Use width property instead of value for edge thickness: