Back

ClassName is embedded in data.

Nodes and links have className attribute in data. Use them to assign additional set of style.

Documentation Open in JSFiddle
Start Free Trial Purchase

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 },
        style:{
            nodeClasses:[
                {className:"classA",style:{fillColor:"rgba(28,124,213,1)", lineColor:"blue"}},
                {className:"classB",style:{fillColor:"rgba(47,195,47,1)",lineWidth:20, lineColor:"rgba(111,82,184,0.7)",lineDash:[10,5]}},
                {className:"classX",style:{fillColor:"orange", radius:45, lineDash:[3,3]}}
            ],
            linkClasses:[
                {className:"classLA",style:{fillColor:"blue", toDecoration:"arrow", direction:"D", lineDash:[3,3]}},
                {className:"classLC",style:{fillColor:"red",lineDash: [10,10,2,2]}}
            ]
        },
        data: { url: "/dvsl/data/net-chart/nodeLinkClasses.json" }

    });

Data

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"
        }
    ]
}
Download Data