Back

ClassName is embedded in data

In this example, nodes and links have className attribute in data, which assigns them in classes that will allow to customize their 'style' separately with 'nodeClasses' and 'linkClasses'. Useful for visually distinguishing data by category.

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