Hi David, Below code is my config for react org chart. I have marked compact as false, and setActiveNodeCentered as false. In some cases, the root has 50-plus nodes. Since I marked compact as false, all 50 nodes are displayed Horizontally. I want those to display 5 or 6 in each row. then should move to the next row same as when we mark Compact as true. (in Compact mode I could see only 2 nodes in each row, but I want min. 5). How to implement that.
Hi David, Below code is my config for react org chart. I have marked compact as false, and setActiveNodeCentered as false. In some cases, the root has 50-plus nodes. Since I marked compact as false, all 50 nodes are displayed Horizontally. I want those to display 5 or 6 in each row. then should move to the next row same as when we mark Compact as true. (in Compact mode I could see only 2 nodes in each row, but I want min. 5). How to implement that.
const OrganizationalChart = (props) => { const d3Container = useRef(null); useLayoutEffect(() => { const chart = new OrgChart(); if (!isEmpty(props.data) && d3Container.current) { chart .scaleExtent([0.4, 1.5]) .container(d3Container.current) .data(props.data) .compact(false) .setActiveNodeCentered(false) .nodeWidth((d) => 350) .nodeHeight((d) => 150) .compactMarginBetween((d) => 100) .onNodeClick((d) => {
}) .buttonContent((node, state) => { return ReactDOMServer.renderToStaticMarkup( <CustomExpandButton {...node.node} /> ); }) .nodeContent((d) => { return ReactDOMServer.renderToStaticMarkup( <CustomNodeContent {...d} /> ); }) .render(); } }); } }, [props, props.data]);