Legend represented classes
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var t = new NetChart({
container: document.getElementById("demo"),
area: { height: null },
data: { url: "/dvsl/data/net-chart/nodeLinkClasses.json" },
legend: { enabled: true },
style: {
nodeClasses: [
{ className: "classA", displayName: "Display name of class A", style: { radius: 20, fillColor: "rgba(28,124,213,0.8)", lineColor: "blue" } },
{ className: "classB", style: { fillColor: "rgba(47,195,47,1)", radius: 55, lineWidth: 20, lineColor: "rgba(176,220,11,0.7)", lineDash: [10, 5] } },
{ className: "classX", style: { fillColor: "orange", radius: 45, lineWidth: 2, lineColor: "black" } },
{ className: "classE", showInLegend: false, style: { fillColor: "yellow", radius: 100, lineColor: "red" } }
],
linkClasses: [
{ className: "classLA", style: { fillColor: "blue", toDecoration: "arrow", direction: "D", lineDash: [3, 3] } },
{ className: "classLC", style: { fillColor: "red", lineDash: [10, 10, 2, 2] } }
]
}
});
Data
Data
Download Data
{
"nodes": [
{
"id": "n1",
"className": "classX classA",
"name": "Node1",
"loaded": true
},
{
"id": "n2",
"className": "classB",
"name": "Node2",
"loaded": true
},
{
"id": "n3",
"className": "classB",
"name": "Node3",
"loaded": true
},
{
"id": "n4",
"className": "classA",
"name": "Node4",
"loaded": true
},
{
"id": "n5",
"className": "classX classB",
"name": "Node5",
"loaded": true
}
],
"links": [
{
"id": "l1",
"className": "classLC classLA",
"from": "n1",
"to": "n2",
"name": "Link1"
},
{
"id": "l2",
"className": "classLA",
"from": "n2",
"to": "n3",
"name": "Link2"
},
{
"id": "l3",
"from": "n3",
"to": "n4",
"name": "Link3"
}
]
}