Documentation
Tutorials
Getting started Advanced Widgets
Github Example Application

Module

Bichord

This chart displays the interrelationships between data through time. The data is arranged radially around a circle with the relationships between the different distinct values (represented as segments in the circle) drawn as arcs connecting the data together. Each arc is assigned a value that represents its proportion.

Tutorials:
See:

View Source widgets/bichord.js, line 7

Methods

# setclickToLockLegend(bool)

Lock the legend by ckicking on the chart.

Parameters:
Name Type Description
bool boolean

Enable or disable.
Default Value:
  • true

View Source widgets/bichord.js, line 326

# setDisplayLimits(limit)

Limit the relationships to be displayed.

Parameters:
Name Type Description
limit number

Limit.
Default Value:
  • 50

View Source widgets/bichord.js, line 310

# setGroupPadding(padding)

The maximum angle occupied by the separations between groups.

Parameters:
Name Type Description
padding number

Value in radians.
Default Value:
  • 0.015

View Source widgets/bichord.js, line 110

# setGroupPaddingPercent(percent)

The maximum percentage of separation between groups.

Parameters:
Name Type Description
percent number

Value between 0 and 100.
Default Value:
  • 50

View Source widgets/bichord.js, line 120

# setGroupWidth(width)

Set the width of the area dedicated to represent a group.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.

All calculations are performed with the radius available for the chord diagram, after removing the space of the labels and their connectors.

Parameters:
Name Type Description
width number | string | function

Width value.
Default Value:
  • Math.min(0.1 * radius, 20)

View Source widgets/bichord.js, line 102

# setKeys(keys)

Set the source and target values of the relationships to be defined in the diagram.

The source values are represented in the left part of the diagram. The target values are represented in the right part of the diagram.

Parameters:
Name Type Description
keys Object

keys to show
source Object

Source values of the relationships to be defined in the diagram.
target Object

Target values of the relationships to be defined in the diagram.

View Source widgets/bichord.js, line 52

Example
{source: 'source', target: 'target'}

# setLabelColour(color)

Set the color of labels.

Parameters:
Name Type Description
color string

Color.
Default Value:
  • "black"

View Source widgets/bichord.js, line 263

# setLabelHeightScale(scale)

Set a value to the calculate the height for the labels.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.
Parameters:
Name Type Description
scale number | string | function

Scale value.
Default Value:
  • "20%"

View Source widgets/bichord.js, line 200

# setLabelLeadersWidth(width)

The width that is dedicated to connectors between labels and groups, if any are necessary. It is a value similar to groupWidth, but, when relative, it is calculated with respect to the effective width that is dedicated to the label.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.
Parameters:
Name Type Description
width number | string | function

Min width value.
Default Value:
  • "33%"

View Source widgets/bichord.js, line 255

# setLabelMaxDensity(density)

Set the maximum occupancy of the perimeter with labels.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.
Parameters:
Name Type Description
density number | string | function

Density value.
Default Value:
  • "80%"

View Source widgets/bichord.js, line 215

# setLabelMaxWidth(width)

Set the maximum width that is dedicated to the labels.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.
Parameters:
Name Type Description
width number | string | function

Width value.
Default Value:
  • "20%"

View Source widgets/bichord.js, line 185

# setLabelMinHeight(height)

The minimum height for the labels. It will evaluate the natural height of the current labels (if there are several heights, on the maximum). It only takes effect if labelMaxDensity</> is not exceeded, which means that the size of the labels is being reduced because of its length. If this property takes effect, the content of some tags will be partially displayed.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.
Parameters:
Name Type Description
height number | string | function

Height value.
Default Value:
  • 5

View Source widgets/bichord.js, line 236

# setLabels(labels)

Show the labels with the names of the groups.

Parameters:
Name Type Description
labels boolean

Enable or disable.

View Source widgets/bichord.js, line 170

# setLegendBgColor(color)

Set the legend background color.

Parameters:
Name Type Description
color string

Color.
Default Value:
  • "rgb(32,32,32)"

View Source widgets/bichord.js, line 294

# setLegendFontColor(color)

Set the font color for the legend.

Parameters:
Name Type Description
color string

Color.
Default Value:
  • "rgb(190,190,190)"

View Source widgets/bichord.js, line 302

# setMinPct(percentage)

Set the minimum percentage of value to show.

Parameters:
Name Type Description
percentage number

Value between 0 and 100.

View Source widgets/bichord.js, line 59

# setPercentile(percentile)

Limit the relationships to be displayed by percentile.

Parameters:
Name Type Description
percentile number

Percentage value.
Default Value:
  • 100

View Source widgets/bichord.js, line 318

# setPeriodNavigation(period)

Set enable or disable the period.

Parameters:
Name Type Description
period boolean

Enable or disable.

View Source widgets/bichord.js, line 286

# setSeparationAngle(angle)

Angle of separation between the two parts of the widgets.

Parameters:
Name Type Description
angle number

Value in grades.

View Source widgets/bichord.js, line 66

# setShowLegend(show)

Shows or hide the legend.

Parameters:
Name Type Description
show boolean

Enbale or disable.
Default Value:
  • false

View Source widgets/bichord.js, line 271

# setSourceColoredChords(sourceColoredChords)

Set if the bands are colored with the color of the sources (true), or the colors of the targets (false).

Parameters:
Name Type Description
sourceColoredChords boolean

Value.

View Source widgets/bichord.js, line 130

# setSourceSideClass(sourceSideClass)

Set a background frame for the sources side.

Parameters:
Name Type Description
sourceSideClass boolean

Enable or disable.

View Source widgets/bichord.js, line 73

# setSubgroups(subgroups)

Set enable or disable a band of color to give information of who is the target.

Parameters:
Name Type Description
subgroups boolean

Show subgroups.
Default Value:
  • true

View Source widgets/bichord.js, line 141

# setSubgroupWidth(width)

Similar to groupWidth, but when relative it is calculated with respect to the width of the group. This space is eaten by the width of the groups, so it should not exceed 50%.

  • If it is a number, it is understood as absolute width.
  • If it is a string with the form "nn%", it is understood to be a percentage of the radius.
  • If it is a string with the form "/ n", "* n", it is understood to be the radius divided or multiplied by n.
  • If it is a function, it is evaluated by passing the radius.
Parameters:
Name Type Description
width number | string | function

Width value.
Default Value:
  • "33%"

View Source widgets/bichord.js, line 161

# setSwapped(swap)

Swaps sources and targets.

Parameters:
Name Type Description
swap boolean
Default Value:
  • false

View Source widgets/bichord.js, line 279

# setTargetSideClass(targetSideClass)

Set a background frame for the sources side.

Parameters:
Name Type Description
targetSideClass boolean

Enable or disable.

View Source widgets/bichord.js, line 81

# setValue(str)

Set the column name to be represented.

Parameters:
Name Type Description
str string

Column name.

View Source widgets/bichord.js, line 35