@jearaneda/react-new-orgchart

An OrgChart fork with a focus on readability and compatibility with bulky diagrams.

Usage no npm install needed!

<script type="module">
  import jearanedaReactNewOrgchart from 'https://cdn.skypack.dev/@jearaneda/react-new-orgchart';
</script>

README

OrgChart

Why use this fork?

  • Panning is now drag-to-scroll based, deprecating the transform CSS property logic. This avoids scrolling and visualization issues when rendering a large OrgChart.

  • Zooming is now scale() based. The main benefit of this change is that the ChartContainer module is simpler and easier to read when compared to the transformation-matrix splitting shenanigans. Using zoom() was a good enough alternative, but it is non-standard.

  • Orgchart downloading is now handled by the dom-to-image library. Dom-to-image has better predictability when dealing with large images, doesn't screw up your snapshot when scrolling, and is 70x faster.

  • Canvas maximum size limits are taken into account. Due to browser limitations, rendering a canvas with dimensions greater than 16384x16384 will result in a faulty, cropped snapshot. Thus, exporting a bulky OrgChart wasn't really possible. I solved this by scaling down any drawn images larger than the limit.

Props

Name Type Default Description
chartClass string A css class to apply to the chart DOM node.
containerClass string Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy".
collapsible boolean true Allows expanding/collapsing the nodes.
datasource object datasource usded to build out structure of orgchart.
draggable boolean false Allows dragging/dropping the nodes to the hierarchy of chart.
multipleSelect boolean false If true, user can select multiple nodes by mouse clicking.
NodeTemplate elementType A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node.
onClickChart function A callback fired when the orgchart is clicking.
onClickNode function A callback fired when the node is clicking.
pan boolean false If true, the chart can be panned.
zoom boolean false If true, the chart can be zoomed.
maxZoom number 7 Represents the maximum possible zoom of the orgchart.
minZoom number 0.5 Represents the minimum possible zoom of the orgchart.
toggleableSiblings boolean true Whether or not siblings should be toggleable. If false, also hides horizontal arrows.
loading boolean false Use this prop to trigger OrgChart's spinner on-demand.
loadingComponent React Element <i className="oci oci-spinner"></i> Use your app's existing loading component to maintain design.
defaultZoom number 0.5 Set the initial zoom.

Methods

Name Description
expandAllNodes User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes()
exportTo User can use this method to export orgchart to png orge. Sample code: orgchartRef.current.exportTo(filename)
zoomIn(amount) User can use this method to zoom-in on the orgchart div. Default zoom amount is 0.05.
zoomIn(amount) User can use this method to zoom-out on the orgchart div. Default zoom amount is 0.05.
resetZoom() Resets zoom to defaultZoom.
setExporting() Sets exporting state. Useful if you need any transformations before actually exporting.

Install

npm install @jearaneda/react-new-orgchart