This demo lets you transfer nodes and combos by dragging. The colour-coded nodes make it easy to keep track of what moved where.

Dragging behaviour

With the default demo settings:

• Start by dragging nodes from a combo to the chart and from the chart to a combo.
• Now try dragging nodes from one combo to another, including to and from the nested combo.
• An easy way to create a new combo (from nodes that don't already belong to one) is by dragging and dropping one node onto another.
• Drag and drop a combo onto a node or other combo. You might find it easier to close the combo first by double-clicking on it. The combo you dragged becomes a nested combo.

The kind of dragging support you give to users depends on your data. If each combo contains fixed data, such as country of origin, you may not want to allow dragging between them. Turn off the Allow transfer between combos checkbox to see this behaviour.

Arranging and resizing

Use the Allow manual arrangement of items checkbox to position dragged items exactly where you want them:

• With the checkbox turned off, every time you transfer an item into a combo, the items are rearranged in a circular pattern.The combo also resizes to accommodate changes.
• With the checkbox turned on, you can position the items yourself.Select the combo to reveal drag handles for resizing. If the combos look untidy once you've finished making manual changes, use the Arrange items and Resize combos buttons to make improvements automatically.

See also

Documentation: Combos and Combos Concepts

Demos: Combo Options and Combining Nodes

Key functions used:

• chart.combo().transfer
• chart.combo().arrange
• chart.combo().combine