Link Format border Error
by jeffersonswartz
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 320px;
max-width: 800px;
margin: 0 auto;
height: 500px;
}
JavaScript
Highcharts.addEvent(
Highcharts.seriesTypes.networkgraph,
'afterSetOptions',
function(e) {
var colors = Highcharts.getOptions().colors,
i = 0,
nodes = {};
e.options.data.forEach(function(link) {
if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = {
id: 'Proto Indo-European',
marker: {
radius: 28
}
};
nodes[link[1]] = {
id: link[1],
marker: {
radius: 18
},
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function(id) {
return nodes[id];
});
}
);
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
marginTop: 80
},
title: {
text: 'The Indo-European Laungauge Tree'
},
subtitle: {
text: 'A Force-Directed Network Graph in Highcharts'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
integration: 'verlet',
linkLength: 100
}
}
},
series: [{
marker: {
radius: 13
},
dataLabels: {
enabled: true,
textPath: {
enabled: false
},
linkTextPath: {
enabled: false
},
borderColor: "#ff80ff",
borderRadius: 1,
borderWidth: 1,
allowOverlap: true
},
data: [
['Proto Indo-European', 'Balto-Slavic'],
['Proto Indo-European', 'Germanic'],
['Proto Indo-European', 'Celtic'],
['Proto Indo-European', 'Italic'],
['Proto Indo-European', 'Hellenic'],
['Proto Indo-European', 'Anatolian'],
['Proto Indo-European', 'Indo-Iranian'],
['Proto Indo-European', 'Tocharian'],
['Indo-Iranian', 'Dardic'],
['Indo-Iranian', 'Indic'],
...