bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
928 stars 330 forks source link

How to Control the number nodes which display in Horizontal Layout #255

Closed ganeshmuthukrish closed 1 year ago

ganeshmuthukrish commented 1 year ago

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]);

bumbeishvili commented 1 year ago

Hi, I don't think that is possible at this point

There is a new layout proposal that in theory could handle your use case. But it probably won't land in the org-chart in a long time

236

image