I am using react and network diagram and i have a problem to change some specific field in my component state.
Code: Select all
this.state = {
options: {
chart: {
type: "networkgraph",
marginTop: 80
},
title: {
text: "Network graph"
},
plotOptions: {
networkgraph: {
keys: ["from", "to"],
layoutAlgorithm: {
enableSimulation: true,
linkLength: 33,
integration: "verlet",
approximation: "barnes-hut",
gravitationalConstant: 0.8
}
}
},
series: [
{
events: {
click: e => {
this.onClick(e);
}
},
marker: {
radius: 10
},
dataLabels: {
enabled: true,
linkFormat: "",
allowOverlap: true
},
data:
[
{
from: 'Node1',
to: 'Node2'
}
],
nodes:
[
{
id: 'Node2',
color: 'green'
}
]
}
]
}
};
//the div i am using in render function elsewhere in the code if it matters.
<HighchartsReact
highcharts={Highcharts}
ref={this.chart}
options={this.state.options} />
Here is the first modification i try to apply without any problem.
It changes color of the 2 nodes:
Code: Select all
let myserie = this.state.options.series;
myserie[0].color = 'red';
this.setState({ options: { series: myserie }});
I try to change color from one node :
Code: Select all
let myserie = this.state.options.series;
myserie[0].nodes[0].color = 'red';
this.setState({ options: { series: myserie }});
When i print node color value in console, i get 'red' despite node is remained green.
How could i change this color ?
Subsidiary question, i would also be interested in changing node color identifying it with its name ('Node2') in place of its index (0).
Thanks for your help
