vis-network
Version:
A dynamic, browser-based visualization library.
68 lines (57 loc) • 2.04 kB
HTML
<!doctype html>
<html>
<head>
<title>Vis Network | Node Styles | Colors</title>
<script type="text/javascript" src="../../../dist/vis-network.min.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:700px;
}
</style>
</head>
<body>
<p>
Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label:'html color', color: 'lime'},
{id: 2, label:'rgb color', color: 'rgb(255,168,7)'},
{id: 3, label:'hex color', color: '#7BE141'},
{id: 4, label:'rgba color', color: 'rgba(97,195,238,0.5)'},
{id: 5, label:'colorObject', color: {background:'pink', border:'purple'}},
{id: 6, label:'colorObject + highlight', color: {background:'#F03967', border:'#713E7F',highlight:{background:'red',border:'black'}}},
{id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
])
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 2, to: 6},
{from: 4, to: 7},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth: 2},
interaction: {hover: true}
}
var network = new vis.Network(container, data, options);
</script>
</body>
</html>