Login/Register
how to alter navigation button color in vis.js
Asked Answered
Solved javascripthtmlcssvis.jsvis.js-network
N

1

5

I have created a custom network with vis.js and have styled it to have red edges and blue nodes. I added the css/network/images/....png folder that came with the download of vis.js that has the navigation buttons inside.

However, these are green by default. I have tried changing them via the vis.css file with background-color: black; and color: black. When I do the first one for background-color, it does add a black circle behind the navigation button but its still green.

How can I fix this? It says on their website that the nav buttons are fully customizable by overloading the css but it doesnt seem to be the case. Any pointers or help would be appreciated, thank you.

Nimble answered 18/7, 2017 at 23:53 Comment(0)
L
12

The navigation buttons are currently released as images. If you want to change the color you would have to change these images.

Also you could just replace the vis-button images with some nice css:

// create an array with nodes
var nodes = [
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
  {id: 3, label: 'Node 3'},
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'}
];

// 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}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  interaction: {
    navigationButtons: true
  }
};

network = new vis.Network(container, data, options);
#mynetwork {
  width: 600px;
  height: 200px;
}

div.vis-network div.vis-navigation div.vis-button.vis-up, 
div.vis-network div.vis-navigation div.vis-button.vis-down, 
div.vis-network div.vis-navigation div.vis-button.vis-left, 
div.vis-network div.vis-navigation div.vis-button.vis-right, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
  background-image: none !important;
}

div.vis-network div.vis-navigation div.vis-button:hover {
  box-shadow: none !important;
}

.vis-button:after {
  font-size: 2em;
  color: gray;
}

.vis-button:hover:after {
  font-size: 2em;
  color: lightgray;
}

.vis-button.vis-up:after {
  content: "▲";
}

.vis-button.vis-down:after {
  content: "▼";
}

.vis-button.vis-left:after {
  content: "◀";
}

.vis-button.vis-right:after {
  content: "▶";
}

.vis-button.vis-zoomIn:after {
  content: "+";
  font-weight: bold;
}

.vis-button.vis-zoomOut:after {
  content: "−";
  font-weight: bold;
}

.vis-button.vis-zoomExtends:after {
  content: "⤧";
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-network.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-network.min.css" rel="stylesheet" />
</head>
<body>
  <div id="mynetwork"></div>
</body>
</html>
Libertarian answered 25/7, 2017 at 15:17 Comment(1)
[1]. the left/right/up/down buttons do not show up for me [2]. this solution did not change the buttons, i am using vis-network.css from within angular, but i have tried vis-network.min.css as well and still no dice – Nickelic

© 2022 - 2024 — McMap. All rights reserved.