vis.js network: Edge colors not displaying in react.js app

Question

I am having a problem with the edge colors when rendering a network visualisation through a react app.

I have a MindMapComponent which contains a network.

I receive the data for the network through the props for the component:

class MindMapComponent extends React.Component {

//React component to display a single submission Item.
//Displays the text and author of a Perspective Item


constructor(props) {
    super(props);
    this.state = {map: props.mindMap, node_options: props.node_options, edge_options: props.edge_options}
}

I then go ahead and create the network in my componentDidMount function:

componentDidMount(){
    var edge_dataset = new vis.DataSet(JSON.parse(this.state.map.conceptmap_edges));
    var nodes_dataset = new vis.DataSet(JSON.parse(this.state.map.conceptmap_nodes));
    var data = {
        nodes:nodes_dataset ,
        edges: edge_dataset
    };
    var edge_options =JSON.parse(this.state.edge_options);
    edge_options.color = {inherit:false};
    var options = {
        edges: edge_options,
        nodes: JSON.parse(this.state.node_options),
        physics: false,
        locale: 'en',
        interaction: {
            navigationButtons: true,
            keyboard: true,
            hover: true
        }
    };
    var network = new vis.Network(this.refs.network, data,options)
    console.log(network);
}

And finally render the whole thing in my render function

render() {
    const liStyle = {
        borderStyle: 'outset',
        backgroundColor: 'lightgrey',
        marginBottom: '10px',
        listStyleType: 'none'
    };

    const metaStyle = {
        paddingLeft: '15px'
    }

    const networkStyle = {
        height:'250px',
        borderRight:'dashed 2px'
    }
    var dateString = new Date(this.state.map.date_added);
    dateString = dateString.getDate() + "/" + (dateString.getMonth() +1) + "/" + dateString.getFullYear();

    return <li key={this.state.map.id} style={liStyle}>
        <div className = 'row'>
            <div className = 'col-lg-8' ref = "network" style = {networkStyle}></div>
            <div className = 'col-lg-4' style = {metaStyle}><br/><p>Submitted on: {dateString}</p></div>

        </div>
    </li>
}

The final network should look like this (rendered in normal html+js app).

However in my react app the colors of the edges do not display

I took a look inside of the network data structure (through the console.log(network) at the end of component did mount). The body.data.edges part of the structure contains the correct color value. However the body.edge.[id].options.color part is empty

I believe this is the source of my problem but am not sure whether my analysis is correct or how to go about fixing it.

Answer 1

I think I have a solution (I ran into the same problem as you, but then in Angular2).

Try setting the color as an Object (see http://visjs.org/docs/network/edges.html) and specify the inherit property to false. E.g.(using typescript)

   const myEdge: Edge =  {
        id: 'myEdge',
        from: 'NODE1',
        to: 'NODE2',
        arrows: 'to',
        color: {color: '#ff0000', inherit: false};
        dashes: true
      }

You might also want to set the highlight and hover colors