Using Vis.js in Angular, how can I set background color to a node, it's like background it's not part of the node obkect

Question

AS in the title, I'm using "vis": "^4.21.0-EOL" in the dependencies, and "@types/vis": "^4.21.24". Everything works well, aside editing/changing certain things, like changing color of existing nodes

node.color.background = '#0BB176'

I get an error saying that background doesn't exist.

Answer 1

Default Color

A default background color for nodes can be set in the network options, such as:

let options = {
  nodes: {
    color: {
      background: '#EA738DFF'
    }
  }
};

Individual Nodes

Individual nodes then then override this with their own colors, such as:

let nodes = new vis.DataSet([
  // Apply a specific background color to node 1
  { id: 1, label: "Node 1", color:{background: '#C5FAD5'}},
  // Apply no color to node 2, so it will use the default color
  { id: 2, label: "Node 2" },
]);

Updating Individual Nodes

If you've already got a nodes DataSet defined and you'd like to update the color of an existing node, then you'll need to use the DataSet update method. More detail on this method can be found in the documentation here.

For example to update node 1 to a new background color you could call update like:

nodes.update({id: 1, color:{background: '#FCE77D'}});

As described in the documentation the provided properties are merged into the current properties, so there is no need to provide the full object with all properties (e.g. label is kept even though it's not provided).

Vis.js Version

Please note the vis.js package mentioned in the question is deprecated as per https://www.npmjs.com/package/vis. They suggest moving to the new package https://www.npmjs.com/package/vis-network. This functionality works the same for both packages, however the newer version has extra methods such as updateOnly which is sometimes more suitable as described here.

Example

Code snippet below, using the depreciated vis.js package, click the button to update an exisitng node:

// create an array with nodes
let nodes = new vis.DataSet([
    // Background Color
  // Override default with specific color for some nodes
  // Any without a background color set will use the default from options
  { id: 1, label: "Node 1", color:{background: '#C5FAD5'}},
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4", color:{background: '#C5FAD5'}},
  { id: 5, label: "Node 5" },
]);

// create an array with edges
let edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 },
]);

// create a network
const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges,
};

// Background Color
// Set default background color in options
let options = {
    nodes: {
    color: {
        background: '#EA738DFF'
    }
  }
};
const network = new vis.Network(container, data, options);

// Setup a button for demo purposes
const btn = document.getElementById("mybutton");
btn.addEventListener('click', function(e){
  nodes.update({id: 1, color:{background: '#FCE77D'}});
});

#mynetwork {
  width: 600px;
  height: 140px;
  border: 1px solid lightgray;
}

<!-- Current Version of vis-network -->
<!-- <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> -->

<!-- Depreciated version of vis -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

<button id="mybutton">Change Node 1 Color</button>
<div id="mynetwork"></div>