Parameters

1. Matrix (Required)

• Type: 2D Array (Numbers)
• Description: The matrix defines the data connections between categories. Each row represents a source, and each column represents a target.
• Example:

[

  [8000, 10000, 7000, 3000],

  [12000, 15000, 10000, 5000],

  [7000, 12000, 5000, 2000],

  [2000, 4000, 3000, 5000]

]

2. Colors Array (Required)

• Type: Array of Strings (Hex/Named Colors)
• Description: Defines the colors assigned to each category.
• Example:

["#222", "#a67c52", "#ffe39f", "#e55a1a"]

3. Labels (Required)

• Type: Array of Strings
• Description: Category labels corresponding to rows/columns in the matrix.
• Example:

["black", "brown", "blonde", "red"]

4. Width

• Type: Number
• Description: The overall width of the diagram canvas.
• Default: 550

5. Height

• Type: Number
• Description: The overall height of the diagram canvas.
• Default: 550

6. Outer Radius

• Type: Number
• Description: The radius of the outer circle where categories are displayed.
• Default: 220

7. Inner Radius

• Type: Number
• Description: The radius of the inner circle from which chords originate.
• Default: 200

Usage

1. Drag and drop the Chord Diagram Component into your OutSystems screen.
2. Provide the Matrix, Labels, and Colors Array parameters.
3. Optionally, adjust the Width, Height, Outer Radius, and Inner Radius for better fit.
4. Publish and test the application.

Example Configuration

Matrix: [[8000,10000,7000,3000],[12000,15000,10000,5000],[7000,12000,5000,2000],[2000,4000,3000,5000]]

Colors Array: ["#222", "#a67c52", "#ffe39f", "#e55a1a"]

Labels: ["black", "brown", "blonde", "red"]

Width: 550

Height: 550

Outer Radius: 220

Inner Radius: 200

Output

• An interactive chord diagram where each category is displayed as a segment of the circle.
• Curved connections (chords) between categories represent data flows defined in the matrix.
• Each chord is color-coded according to the Colors Array for easy interpretation.

Notes

• Ensure that the Matrix, Labels, and Colors Array all have the same number of elements.
• Large datasets may impact rendering performance.
• Styling can be customized further using CSS applied to the component container.