I've been looking at this fiddle in an attempt to understand Highcharts network graphs: https://jsfiddle.net/20g58t9f/
What I'd like to do is apply a different colour/shape to each node in the graph. I'd have thought that something like this would work:
marker: {
radius: 40,
symbol: '{point.symbol}',
fillColor: '{point.fillcolor}'
},
data: [{
from: {
name: 'n1',
rel: "myRelation",
},
to: 'n2',
fillcolor: 'green',
symbol: 'triangle'
}, {
from: 'n2',
to: 'n3',
fillcolor: 'blue',
symbol: 'square'
}];
It doesn't, though; each node ends up as a black circle. I can't find any information on how point is being used in this example, either (https://api.highcharts.com/class-reference/Highcharts.Point is of no help).
Does anyone have any suggestions?
You need to use nodes options to customize individual node.
nodes: [{
id: 'n2',
color: 'yellow',
}, {
id: 'n3',
color: 'red',
marker: {
symbol: 'triangle'
}
}, {
id: 'n4',
color: 'green',
marker: {
symbol: 'square'
}
}]
Live demo: https://jsfiddle.net/BlackLabel/etug64kw/
API Reference: https://api.highcharts.com/highcharts/series.networkgraph.nodes
Related
I started exploring highcharts. Created report with organization hierarchy with drilldown.
Unable to format the links in drilldown report, they look like triangles instead of straight lines like in the main org chart and getting messy when the hierarchy in the drilldown gets multiple nodes.
In below example, click on Div.2, see the drilldown links. What chart options do we have to control these triagle svg shapes other than linkLineWidth etc..
Links with Triangle Shape
jsfiddle Test Case
Highcharts.chart('container', {
chart: {
height: 600,
width: 600,
inverted: true,
type: 'organization'
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
name: 'Highsoft',
data: [{
from: "CO",
to: "DIV01",
},
{
from: 'CO',
to: 'DIV02'
}
],
nodes: [{
id: 'DIV01',
title: 'Div Hd 1',
name: 'Div. 1',
drilldown: "DIV01"
},
{
id: 'DIV02',
title: 'Div Hd 2',
name: 'Div. 2',
drilldown: 'DIV02'
}
]
}],
drilldown: {
activeDataLabelStyle: {
color: 'contrast'
},
layout: 'hanging',
series: [{
id: "DIV01",
name: "DIV01",
keys: ['from', 'to'],
data: [
['DIV01', 'DEP01']
],
nodes: [{
id: 'DEP01',
title: 'Dept Hd 1',
name: 'Dept. 1'
}]
},
{
id: "DIV02",
name: "DIV02",
keys: ['from', 'to'],
data: [
['DIV02', 'DEP02'],
['DEP02', 'DEP03'],
['DEP02', 'DEP04'],
['DEP04', 'DEP05'],
['DEP04', 'DEP06'] ,
['DEP04', 'DEP08'] ,
['DEP06', 'DEP07']
],
nodes: [{
id: 'DEP02'
}]
}
]
}
});
It's a bug, more information you will find in Github issue, workaround you can change patch color via CSS fill: none.
.highcharts-series path {
fill: none;
}
demo: https://jsfiddle.net/BlackLabel/ay1czgxp/
it is possible to style HIGHCHARTS like this?
please see here
Yes, it is possible. All you need to do is to use zones with x axis.
Highcharts.chart('container', {
series: [{
...,
zoneAxis: 'x',
zones: [{
value: 2,
fillColor: 'red',
color: 'red'
}, ...],
marker: {
enabled: false
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/pr49c3je/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
I am creating a timeline chart and want to set explicitly a color to bar of timeline charts as attached in spac , how we can achieve it ?
[enter image description here][1][1]: https://i.stack.imgur.com/JohRj.png
Define color property for data points:
series: [{
...,
data: [{
color: 'orange',
...
}, {
color: 'black',
...
}, {
color: 'red',
..
}, {
color: 'red',
...
}]
}]
Live demo: https://jsfiddle.net/BlackLabel/9rybf43z/
API Reference: https://api.highcharts.com/highcharts/series.timeline.data.color
Does anyone know if we can achieve something like this in Highcharts?
We wish that a certain rectangular area gets highlighted when the user mouseover the charts.
Did anyone accomplish something similar before that may help us here?
Thank you.
You can use renderer to render any shape on mouseover and hide it on mouseleave. Positioning rendered shapes require some calculation/coding but it gives you total freedom.
From the picture you posted, you can also use an easier approach, not the most elegant, but it is fast in getting the result. Create a hidden series, specify the points which will define the area and show/hide it on events.
series: [{
data: [5, 10, 15, 10, 5],
color: 'rgba(0,0,200, 0.2)',
states: {
hover: {
enabled: false
}
}
}, {
id: 'h1',
data: [
[1, 10], {
x: 2,
y: 15,
marker: {
enabled: true,
fillColor: 'black',
symbol: 'circle'
}
},
[3, 10]
],
marker: {
enabled: false
},
linkedTo: 's1',
visible: false,
enableMouseTracking: false
}],
example: http://jsfiddle.net/9L4e328j/
I haven't tried this , but you can try something like this to get the desired result :
tooltip: {
formatter: function() {
//resetting state
for(i=0;i<this.series.data.length;i++){
this.series.data[i].setState();
}
var index=this.series.data.indexOf( this.point )
//setting state on the current,previous,next point
this.series.data[index].setState('hover');
this.series.data[index-1].setState('hover');
this.series.data[index+1].setState('hover');
return "your tooltip";
}
}
I have a bar chart and I would like to color one of the series white and enable a black border for this series only.
I'd rather not enable a border for everything. Is this possible?
I have a fiddle example - I was hoping it could be achieved in a similar way to the 'color' attribute of the series, but I can't see anything in the API;
series: [{
name: 'Measure',
data: [{
y: 10}, { y:9, color: 'white'}, { y: 8 }, { y: 7 }, { y: 7.2 }]
}]
http://jsfiddle.net/ZzXY2/
It turns out that 'borderColor' is an acceptable attribute of each of the data points, it's just not documented.
Turn the border on and set the default color to white:
plotOptions: {
bar: {
borderColor: '#FFFFFF',
borderWidth: 1
}
}
Set the border color within the appropriate series
series: [{
name: 'Measure',
data: [
{y: score2, color: colors[1], borderColor:'Yellow'},
{y: scoreprev, color: colors[4] },
{y: score1, color: colors[0] },
{y: score3, color: colors[2] },
{y: score4, color: colors[3] }] }]