Back

Legend represented classes

In NetChart, nodes and links can be grouped into categories using 'className' values in 'data'. The legend displays each class as a clickable legend item. If you wish to exclude a class from the legend, use "showInLegend: false".

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 },
        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 
{
    "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