Switch between the options above the chart to see the impact on the layout.
Visualizing hierarchical data with lots of items across multiple levels can result in wide charts that offer little insight when viewed at a high level.
Setting the arrange option to 'grid' stacks groups of four or more nodes with identical connections into grids and reduces the amount of space needed to display the whole chart width.
You can also use the packing property to make better use of available screen space.
See also
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { Chart } from "regraph";
import data from "./data";
import "@ci/theme/rg/css/button.css";
import "@ci/theme/rg/css/layout.css";
export const Demo = () => <StackAndPackDemo items={data()} />;
function StackAndPackDemo(props) {
const { items } = props;
const [layout, setLayout] = useState({
name: "sequential",
linkShape: "curved",
packing: "rectangle",
stacking: { arrange: "grid" },
});
return (
<div className="story">
<div
className="options"
style={{ flexBasis: "auto", minWidth: 400, flexWrap: "nowrap" }}
>
<div>
<div>
<span
style={{ display: "inline-block", width: 160 }}
className="label"
>
Group stacking
</span>
<button
type="button"
className={
layout.stacking || layout.stacking.arrange === "none"
? "active"
: ""
}
onClick={() =>
setLayout({ ...layout, stacking: { arrange: "none" } })
}
>
None
</button>
<button
type="button"
className={
layout.stacking && layout.stacking.arrange === "grid"
? "active"
: ""
}
onClick={() =>
setLayout({ ...layout, stacking: { arrange: "grid" } })
}
>
Grid
</button>
</div>
<div>
<span
style={{ display: "inline-block", width: 160 }}
className="label"
>
Component packing
</span>
<button
type="button"
className={layout.packing === "aligned" ? "active" : ""}
onClick={() => setLayout({ ...layout, packing: "aligned" })}
>
Aligned
</button>
<button
type="button"
className={layout.packing === "rectangle" ? "active" : ""}
onClick={() => setLayout({ ...layout, packing: "rectangle" })}
>
Rectangle
</button>
</div>
</div>
</div>
<Chart
animation={{ time: 500 }}
items={items}
layout={layout}
options={{ navigation: false, overview: false, minZoom: 0.001 }}
/>
</div>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
function data() {
return {
node5: { ...style.secondary1 },
node338: { ...style.primary0 },
node339: { ...style.primary1 },
node340: { ...style.primary1 },
node341: { ...style.primary1 },
node342: { ...style.primary1 },
node343: { ...style.primary1 },
node344: { ...style.primary1 },
node345: { ...style.primary1 },
node346: { ...style.primary1 },
node347: { ...style.primary1 },
node368: { ...style.primary0 },
node369: { ...style.primary0 },
node370: { ...style.primary0 },
node371: { ...style.primary0 },
node372: { ...style.primary0 },
node373: { ...style.primary0 },
node374: { ...style.primary0 },
node375: { ...style.primary0 },
node376: { ...style.primary0 },
node377: { ...style.primary0 },
node378: { ...style.primary0 },
node379: { ...style.primary0 },
node380: { ...style.primary0 },
node381: { ...style.primary0 },
node382: { ...style.primary0 },
node383: { ...style.primary0 },
node384: { ...style.primary0 },
node385: { ...style.primary0 },
node386: { ...style.primary0 },
node387: { ...style.primary0 },
node388: { ...style.primary0 },
node389: { ...style.primary0 },
node390: { ...style.primary0 },
node391: { ...style.primary0 },
node392: { ...style.primary0 },
node393: { ...style.primary0 },
node394: { ...style.primary0 },
node395: { ...style.primary0 },
node396: { ...style.primary0 },
node397: { ...style.primary0 },
node398: { ...style.primary0 },
node399: { ...style.primary0 },
node400: { ...style.primary0 },
node10: { ...style.secondary1 },
node401: { ...style.primary0 },
node402: { ...style.primary0 },
node403: { ...style.primary0 },
node404: { ...style.primary0 },
node405: { ...style.primary0 },
node406: { ...style.primary0 },
node407: { ...style.primary0 },
node423: { ...style.primary0 },
node424: { ...style.primary0 },
node425: { ...style.primary0 },
node426: { ...style.primary0 },
node427: { ...style.primary0 },
node428: { ...style.primary0 },
node429: { ...style.primary0 },
node430: { ...style.primary0 },
node431: { ...style.primary0 },
node432: { ...style.primary0 },
node433: { ...style.primary0 },
node4171: { ...style.primary0 },
node434: { ...style.primary0 },
node435: { ...style.primary0 },
node436: { ...style.primary0 },
node437: { ...style.primary0 },
node438: { ...style.primary0 },
node439: { ...style.primary0 },
node440: { ...style.primary0 },
node441: { ...style.primary0 },
node442: { ...style.primary0 },
node3872: { ...style.secondary1 },
node110: { ...style.primary0 },
node114: { ...style.primary0 },
node118: { ...style.primary0 },
node122: { ...style.primary0 },
node3876: { ...style.primary0 },
node3878: { ...style.primary0 },
node132: { ...style.primary0 },
node136: { ...style.primary0 },
node140: { ...style.primary1 },
node171: { ...style.primary0 },
node3894: { ...style.primary1 },
node3901: { ...style.primary1 },
node32: { ...style.primary0 },
node3907: { ...style.primary1 },
node3501: { ...style.primary2 },
node3508: { ...style.primary2 },
node299: { ...style.primary2 },
node303: { ...style.primary2 },
node3506: { ...style.primary2 },
node3920: { ...style.primary2 },
node3924: { ...style.primary1 },
node3928: { ...style.primary1 },
node3932: { ...style.primary1 },
node3945: { ...style.primary0 },
node3949: { ...style.primary0 },
node2785: { ...style.primary0 },
node494: { ...style.primary0 },
node498: { ...style.primary0 },
node502: { ...style.primary0 },
node472: { ...style.primary1 },
node3992: { ...style.secondary1 },
node468: { ...style.primary0 },
node476: { ...style.primary1 },
node481: { ...style.primary2 },
node4173: { ...style.secondary1 },
node724: { ...style.primary0 },
node728: { ...style.primary0 },
node732: { ...style.primary0 },
node736: { ...style.primary0 },
node740: { ...style.primary0 },
node744: { ...style.primary0 },
node748: { ...style.primary0 },
node113: { ...style.primary0 },
node121: { ...style.primary0 },
node3877: { ...style.primary0 },
node135: { ...style.primary0 },
node143: { ...style.primary0 },
node3900: { ...style.primary1 },
node300: { ...style.primary1 },
node3913: { ...style.primary3 },
node3919: { ...style.primary3 },
node3921: { ...style.primary2 },
node3927: { ...style.primary1 },
node3944: { ...style.secondary1 },
node485: { ...style.primary1 },
node497: { ...style.primary0 },
node1611: { ...style.secondary1 },
node467: { ...style.primary0 },
node479: { ...style.primary2 },
node723: { ...style.primary0 },
node731: { ...style.primary0 },
node739: { ...style.primary0 },
node747: { ...style.primary0 },
node119: { ...style.primary0 },
node133: { ...style.primary0 },
node3898: { ...style.primary1 },
node3911: { ...style.primary3 },
node3507: { ...style.primary2 },
node3933: { ...style.primary1 },
node6: { ...style.secondary1 },
node3979: { ...style.primary0 },
node721: { ...style.primary0 },
node737: { ...style.primary0 },
node115: { ...style.primary0 },
node174: { ...style.primary1 },
node301: { ...style.primary2 },
node491: { ...style.secondary1 },
node483: { ...style.primary1 },
node107: { ...style.primary0 },
node3914: { ...style.primary3 },
node469: { ...style.primary0 },
node123: { ...style.primary0 },
node725: { ...style.primary0 },
node499: { ...style.primary0 },
node112: { ...style.primary0 },
node120: { ...style.primary0 },
node128: { ...style.primary0 },
node134: { ...style.primary0 },
node142: { ...style.primary1 },
node3899: { ...style.primary1 },
node4172: { ...style.secondary1 },
node3912: { ...style.primary3 },
node3918: { ...style.primary3 },
node305: { ...style.primary2 },
node3926: { ...style.primary1 },
node3934: { ...style.primary1 },
node471: { ...style.primary0 },
node495: { ...style.primary0 },
node505: { ...style.primary0 },
node466: { ...style.primary0 },
node478: { ...style.primary2 },
node722: { ...style.primary0 },
node730: { ...style.primary0 },
node738: { ...style.primary0 },
node746: { ...style.primary0 },
node117: { ...style.primary0 },
node131: { ...style.primary1 },
node3893: { ...style.primary1 },
node3910: { ...style.primary2 },
node3500: { ...style.primary2 },
node3931: { ...style.primary1 },
node493: { ...style.primary0 },
node1811: { ...style.primary0 },
node33: { ...style.secondary1 },
node735: { ...style.primary0 },
node111: { ...style.primary0 },
node141: { ...style.primary1 },
node3917: { ...style.primary2 },
node3950: { ...style.primary0 },
node477: { ...style.primary2 },
node745: { ...style.primary0 },
node3908: { ...style.primary1 },
node474: { ...style.primary1 },
node137: { ...style.primary0 },
node741: { ...style.primary0 },
node3902: { ...style.primary1 },
node116: { ...style.primary0 },
node130: { ...style.primary1 },
node173: { ...style.primary1 },
node3909: { ...style.primary1 },
node304: { ...style.primary2 },
node3930: { ...style.primary1 },
node492: { ...style.primary0 },
node1810: { ...style.secondary1 },
node484: { ...style.primary1 },
node734: { ...style.primary0 },
node109: { ...style.primary0 },
node139: { ...style.primary0 },
node3916: { ...style.primary3 },
node3948: { ...style.primary0 },
node475: { ...style.primary1 },
node743: { ...style.primary0 },
node298: { ...style.primary1 },
node504: { ...style.primary0 },
node129: { ...style.primary0 },
node733: { ...style.primary0 },
node3509: { ...style.primary2 },
node3875: { ...style.primary0 },
node163: { ...style.secondary1 },
node3922: { ...style.primary1 },
node500: { ...style.primary0 },
node726: { ...style.primary0 },
node125: { ...style.primary0 },
node3923: { ...style.primary1 },
node727: { ...style.primary0 },
node3925: { ...style.primary1 },
node3929: { ...style.primary1 },
node108: { ...style.primary0 },
node3915: { ...style.primary3 },
node470: { ...style.primary0 },
node334: { ...style.primary0 },
node127: { ...style.primary0 },
node3946: { ...style.primary0 },
node138: { ...style.primary0 },
node742: { ...style.primary0 },
node729: { ...style.primary0 },
node3947: { ...style.primary0 },
node501: { ...style.primary0 },
node389new: { ...style.primary0 },
node394new: { ...style.primary0 },
node5new: { ...style.secondary1 },
node348new: { ...style.primary0 },
node375new: { ...style.primary0 },
node423new: { ...style.primary0 },
node427new: { ...style.primary0 },
node349new: { ...style.primary1 },
node350new: { ...style.primary1 },
node352new: { ...style.primary0 },
node353new: { ...style.primary1 },
node354new: { ...style.primary1 },
node440new: { ...style.primary0 },
node441new: { ...style.primary0 },
node351new: { ...style.primary1 },
node355new: { ...style.primary1 },
node356new: { ...style.primary1 },
node357new: { ...style.primary1 },
node358new: { ...style.primary1 },
node359new: { ...style.primary1 },
node360new: { ...style.primary1 },
node361new: { ...style.primary1 },
node362new: { ...style.primary1 },
node363new: { ...style.primary1 },
node364new: { ...style.primary1 },
node409new: { ...style.primary1 },
node413new: { ...style.primary1 },
node417new: { ...style.primary1 },
node408new: { ...style.primary0 },
node410new: { ...style.primary1 },
node414new: { ...style.primary1 },
node418new: { ...style.primary1 },
node365new: { ...style.primary1 },
node366new: { ...style.primary1 },
node367new: { ...style.primary1 },
node411new: { ...style.primary1 },
node415new: { ...style.primary1 },
node419new: { ...style.primary1 },
node421new: { ...style.primary1 },
node422new: { ...style.primary1 },
node412new: { ...style.primary1 },
node416new: { ...style.primary1 },
node420new: { ...style.primary1 },
node444new: { ...style.primary1 },
node449new: { ...style.primary1 },
node454new: { ...style.primary1 },
node459new: { ...style.primary1 },
node464new: { ...style.primary1 },
node445new: { ...style.primary1 },
node450new: { ...style.primary1 },
node455new: { ...style.primary1 },
node460new: { ...style.primary1 },
node465new: { ...style.primary1 },
node443new: { ...style.primary0 },
node446new: { ...style.primary1 },
node451new: { ...style.primary1 },
node456new: { ...style.primary1 },
node461new: { ...style.primary1 },
node447new: { ...style.primary1 },
node452new: { ...style.primary1 },
node457new: { ...style.primary1 },
node462new: { ...style.primary1 },
node448new: { ...style.primary1 },
node453new: { ...style.primary1 },
node458new: { ...style.primary1 },
node463new: { ...style.primary1 },
link618: {
id1: "node5",
id2: "node338",
...style.link,
},
link619: {
id1: "node338",
id2: "node339",
...style.link,
},
link620: {
id1: "node338",
id2: "node340",
...style.link,
},
link621: {
id1: "node338",
id2: "node341",
...style.link,
},
link622: {
id1: "node338",
id2: "node342",
...style.link,
},
link623: {
id1: "node338",
id2: "node343",
...style.link,
},
link624: {
id1: "node338",
id2: "node344",
...style.link,
},
link625: {
id1: "node338",
id2: "node345",
...style.link,
},
link626: {
id1: "node338",
id2: "node346",
...style.link,
},
link627: {
id1: "node338",
id2: "node347",
...style.link,
},
link648: {
id1: "node5",
id2: "node368",
...style.link,
},
link649: {
id1: "node5",
id2: "node369",
...style.link,
},
link650: {
id1: "node5",
id2: "node370",
...style.link,
},
link651: {
id1: "node5",
id2: "node371",
...style.link,
},
link652: {
id1: "node5",
id2: "node372",
...style.link,
},
link653: {
id1: "node5",
id2: "node373",
...style.link,
},
link654: {
id1: "node5",
id2: "node374",
...style.link,
},
link655: {
id1: "node5",
id2: "node375",
...style.link,
},
link656: {
id1: "node5",
id2: "node376",
...style.link,
},
link657: {
id1: "node5",
id2: "node377",
...style.link,
},
link658: {
id1: "node5",
id2: "node378",
...style.link,
},
link659: {
id1: "node5",
id2: "node379",
...style.link,
},
link660: {
id1: "node5",
id2: "node380",
...style.link,
},
link661: {
id1: "node5",
id2: "node381",
...style.link,
},
link662: {
id1: "node5",
id2: "node382",
...style.link,
},
link663: {
id1: "node5",
id2: "node383",
...style.link,
},
link664: {
id1: "node5",
id2: "node384",
...style.link,
},
link665: {
id1: "node5",
id2: "node385",
...style.link,
},
link666: {
id1: "node5",
id2: "node386",
...style.link,
},
link667: {
id1: "node5",
id2: "node387",
...style.link,
},
link668: {
id1: "node5",
id2: "node388",
...style.link,
},
link669: {
id1: "node5",
id2: "node389",
...style.link,
},
link670: {
id1: "node5",
id2: "node390",
...style.link,
},
link671: {
id1: "node5",
id2: "node391",
...style.link,
},
link672: {
id1: "node5",
id2: "node392",
...style.link,
},
link673: {
id1: "node5",
id2: "node393",
...style.link,
},
link674: {
id1: "node5",
id2: "node394",
...style.link,
},
link675: {
id1: "node5",
id2: "node395",
...style.link,
},
link676: {
id1: "node5",
id2: "node396",
...style.link,
},
link677: {
id1: "node5",
id2: "node397",
...style.link,
},
link678: {
id1: "node5",
id2: "node398",
...style.link,
},
link679: {
id1: "node5",
id2: "node399",
...style.link,
},
link680: {
id1: "node5",
id2: "node400",
...style.link,
},
link681: {
id1: "node10",
id2: "node388",
...style.link,
},
link682: {
id1: "node5",
id2: "node401",
...style.link,
},
link683: {
id1: "node5",
id2: "node402",
...style.link,
},
link684: {
id1: "node5",
id2: "node403",
...style.link,
},
link685: {
id1: "node5",
id2: "node404",
...style.link,
},
link686: {
id1: "node5",
id2: "node405",
...style.link,
},
link687: {
id1: "node5",
id2: "node406",
...style.link,
},
link688: {
id1: "node5",
id2: "node407",
...style.link,
},
link704: {
id1: "node5",
id2: "node423",
...style.link,
},
link705: {
id1: "node5",
id2: "node424",
...style.link,
},
link706: {
id1: "node5",
id2: "node425",
...style.link,
},
link707: {
id1: "node5",
id2: "node426",
...style.link,
},
link708: {
id1: "node5",
id2: "node427",
...style.link,
},
link709: {
id1: "node5",
id2: "node428",
...style.link,
},
link710: {
id1: "node5",
id2: "node429",
...style.link,
},
link711: {
id1: "node5",
id2: "node430",
...style.link,
},
link712: {
id1: "node5",
id2: "node431",
...style.link,
},
link713: {
id1: "node5",
id2: "node432",
...style.link,
},
link714: {
id1: "node5",
id2: "node433",
...style.link,
},
link715: {
id1: "node5",
id2: "node4171",
...style.link,
},
link716: {
id1: "node5",
id2: "node434",
...style.link,
},
link717: {
id1: "node5",
id2: "node435",
...style.link,
},
link718: {
id1: "node5",
id2: "node436",
...style.link,
},
link719: {
id1: "node5",
id2: "node437",
...style.link,
},
link720: {
id1: "node5",
id2: "node438",
...style.link,
},
link721: {
id1: "node5",
id2: "node439",
...style.link,
},
link722: {
id1: "node5",
id2: "node440",
...style.link,
},
link723: {
id1: "node5",
id2: "node441",
...style.link,
},
link724: {
id1: "node5",
id2: "node442",
...style.link,
},
link93: {
id1: "node3872",
id2: "node110",
...style.link,
},
link97: {
id1: "node3872",
id2: "node114",
...style.link,
},
link101: {
id1: "node3872",
id2: "node118",
...style.link,
},
link105: {
id1: "node3872",
id2: "node122",
...style.link,
},
link109: {
id1: "node3872",
id2: "node3876",
...style.link,
},
link113: {
id1: "node3872",
id2: "node3878",
...style.link,
},
link117: {
id1: "node3872",
id2: "node132",
...style.link,
},
link121: {
id1: "node3872",
id2: "node136",
...style.link,
},
link125: {
id1: "node139",
id2: "node140",
...style.link,
},
link147: {
id1: "node171",
id2: "node174",
...style.link,
},
link156: {
id1: "node171",
id2: "node3898",
...style.link,
},
link160: {
id1: "node171",
id2: "node3902",
...style.link,
},
link257: {
id1: "node32",
id2: "node300",
...style.link,
},
link261: {
id1: "node3907",
id2: "node3910",
...style.link,
},
link265: {
id1: "node3910",
id2: "node3913",
...style.link,
},
link269: {
id1: "node3508",
id2: "node3916",
...style.link,
},
link273: {
id1: "node3917",
id2: "node3919",
...style.link,
},
link277: {
id1: "node3908",
id2: "node3500",
...style.link,
},
link281: {
id1: "node3909",
id2: "node3921",
...style.link,
},
link285: {
id1: "node32",
id2: "node3923",
...style.link,
},
link289: {
id1: "node32",
id2: "node3927",
...style.link,
},
link293: {
id1: "node32",
id2: "node3931",
...style.link,
},
link330: {
id1: "node3944",
id2: "node3945",
...style.link,
},
link334: {
id1: "node3944",
id2: "node3949",
...style.link,
},
link362: {
id1: "node491",
id2: "node492",
...style.link,
},
link366: {
id1: "node6",
id2: "node497",
...style.link,
},
link370: {
id1: "node6",
id2: "node501",
...style.link,
},
link374: {
id1: "node6",
id2: "node471",
...style.link,
},
link378: {
id1: "node1810",
id2: "node1811",
...style.link,
},
link750: {
id1: "node6",
id2: "node468",
...style.link,
},
link754: {
id1: "node471",
id2: "node476",
...style.link,
},
link758: {
id1: "node476",
id2: "node481",
...style.link,
},
link972: {
id1: "node4173",
id2: "node721",
...style.link,
},
link976: {
id1: "node4173",
id2: "node725",
...style.link,
},
link980: {
id1: "node4173",
id2: "node729",
...style.link,
},
link984: {
id1: "node4173",
id2: "node733",
...style.link,
},
link988: {
id1: "node4173",
id2: "node737",
...style.link,
},
link992: {
id1: "node4173",
id2: "node741",
...style.link,
},
link996: {
id1: "node4173",
id2: "node745",
...style.link,
},
link92: {
id1: "node3872",
id2: "node109",
...style.link,
},
link100: {
id1: "node3872",
id2: "node117",
...style.link,
},
link108: {
id1: "node3872",
id2: "node125",
...style.link,
},
link116: {
id1: "node129",
id2: "node131",
...style.link,
},
link124: {
id1: "node3872",
id2: "node139",
...style.link,
},
link150: {
id1: "node171",
id2: "node3894",
...style.link,
},
link256: {
id1: "node4172",
id2: "node32",
...style.link,
},
link264: {
id1: "node3910",
id2: "node3912",
...style.link,
},
link272: {
id1: "node3917",
id2: "node3918",
...style.link,
},
link280: {
id1: "node3909",
id2: "node305",
...style.link,
},
link288: {
id1: "node32",
id2: "node3926",
...style.link,
},
link296: {
id1: "node32",
id2: "node3934",
...style.link,
},
link361: {
id1: "node2785",
id2: "node485",
...style.link,
},
link369: {
id1: "node6",
id2: "node500",
...style.link,
},
link377: {
id1: "node471",
id2: "node474",
...style.link,
},
link753: {
id1: "node471",
id2: "node475",
...style.link,
},
link761: {
id1: "node33",
id2: "node171",
...style.link,
},
link979: {
id1: "node4173",
id2: "node728",
...style.link,
},
link987: {
id1: "node4173",
id2: "node736",
...style.link,
},
link995: {
id1: "node4173",
id2: "node744",
...style.link,
},
link94: {
id1: "node3872",
id2: "node111",
...style.link,
},
link110: {
id1: "node3872",
id2: "node127",
...style.link,
},
link126: {
id1: "node139",
id2: "node141",
...style.link,
},
link258: {
id1: "node32",
id2: "node3907",
...style.link,
},
link274: {
id1: "node3908",
id2: "node303",
...style.link,
},
link290: {
id1: "node32",
id2: "node3928",
...style.link,
},
link363: {
id1: "node491",
id2: "node493",
// ...truncated 797 lines<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>