Caprica Software

React Org Chart Tutorial

Mixed Content

Content for chart nodes can be specified in a number of ways.

If only a simple caption is required for each node, then the label property on the <OrgChart.Node> component can be used.

Instead of plain text, it is possible to pass instead another React component via that same label property.

Whether the label property is used or not, node content can be included in the <OrgChart.Node> itself, this could be standard HTML tags or other React components.

You can see from the example chart that when using the label property additional default styling is applied.

The Finished Chart

Example pending...

JSX

MixedContentChart.tsx
const Star = () => <img className="star" alt="star" src="/star.png"/>

const MixedContentChart = () =>
    <OrgChart>
        <OrgChart.Node label="Mixed Content">
            <Star/><Star/><Star/>
            <OrgChart.Node label="Plain Text">
                <OrgChart.Node label="Label Text"/>
                <OrgChart.Node>Content Text</OrgChart.Node>
            </OrgChart.Node>
            <OrgChart.Node label="Component">
                <OrgChart.Node label={<span><Star/> Label <Star/></span>}/>
                <OrgChart.Node><Star/> Content <Star/></OrgChart.Node>
            </OrgChart.Node>
            <OrgChart.Node label={<span>Label<br/>&amp;<br/>Content</span>}>
                <OrgChart.Node label="Label Text"><Star/> Content <Star/></OrgChart.Node>
                <OrgChart.Node label={<span><Star/> Label <Star/></span>}><Star/> Content <Star/></OrgChart.Node>
            </OrgChart.Node>
        </OrgChart.Node>
    </OrgChart>