C lnks

C link stands for curved links

You can specify two or more curved links in one chart
We use clinks to show additional relations. You can have one-to-many or many-to-many clink relations.

C link options

clinks={[
  { from: 4, to: 0, label: 'text' },
  { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
  { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
]}

• from – id of the start node
• to – id of the end node

Define label to add text in the middle of the slink. Its position depends on labelPosition (start, middle, end).

Add a template to style the slink.

C link Example

C link curve

To change the curve you should import OrgChartJS in order to use the constant

import { OrgChartReact, OrgChartJS } from "balkan-orgchart-react";

then change the curve:

OrgChartJS.CLINK_CURVE = 1.5;

Use OrgChart.CLINK_CURVE = 0 for a straight link.

C link Example

C link methods

You should import OrgChartJS in order to use the API

import { OrgChartReact, OrgChartJS } from "balkan-orgchart-react";

then use the method in the code:

const chartRef = useRef<OrgChartJS>(null);
chartRef.current?.addClink(4, 0, 'text').draw();

const chartRef = useRef<OrgChartJS>(null);
chartRef.current?.removeClink(4, 0).draw();

C link Methods Example