How to use @nivo/chord - 10 common examples

group: 'Style',
    },
    {
        key: 'arcBorderWidth',
        help: 'Arcs border width.',
        required: false,
        defaultValue: defaults.arcBorderWidth,
        type: 'number',
        controlType: 'lineWidth',
        group: 'Style',
    },
    {
        key: 'arcBorderColor',
        help: 'Arcs border color.',
        required: false,
        defaultValue: defaults.arcBorderColor,
        type: 'string | object | Function',
        controlType: 'inheritedColor',
        group: 'Style',
    },
    {
        key: 'ribbonOpacity',
        help: 'Ribbons opacity.',
        required: false,
        defaultValue: defaults.ribbonOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Style',
    },
    {
        key: 'ribbonBorderWidth',
        help: 'Ribbons border width.',

group: 'Style',
    },
    {
        key: 'arcOpacity',
        help: 'Arcs opacity.',
        required: false,
        defaultValue: defaults.arcOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Style',
    },
    {
        key: 'arcBorderWidth',
        help: 'Arcs border width.',
        required: false,
        defaultValue: defaults.arcBorderWidth,
        type: 'number',
        controlType: 'lineWidth',
        group: 'Style',
    },
    {
        key: 'arcBorderColor',
        help: 'Arcs border color.',
        required: false,
        defaultValue: defaults.arcBorderColor,
        type: 'string | object | Function',
        controlType: 'inheritedColor',
        group: 'Style',
    },
    {
        key: 'ribbonOpacity',
        help: 'Ribbons opacity.',

{
        key: 'isInteractive',
        flavors: ['svg', 'canvas'],
        help: 'Enable/disable interactivity.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.isInteractive,
        controlType: 'switch',
        group: 'Interactivity',
    },
    {
        key: 'arcHoverOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Arc opacity when hover (0~1).',
        required: false,
        defaultValue: defaults.arcHoverOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'arcHoverOthersOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Arc opacity when not hover (0~1).',
        required: false,
        defaultValue: defaults.arcHoverOthersOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'ribbonHoverOpacity',

{
        key: 'arcHoverOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Arc opacity when hover (0~1).',
        required: false,
        defaultValue: defaults.arcHoverOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'arcHoverOthersOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Arc opacity when not hover (0~1).',
        required: false,
        defaultValue: defaults.arcHoverOthersOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'ribbonHoverOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Ribbon opacity when hover (0~1).',
        required: false,
        defaultValue: defaults.ribbonHoverOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'ribbonHoverOthersOpacity',

},
    },
    {
        key: 'colors',
        help: 'Defines how to compute arc/ribbon color.',
        type: 'string | Function | string[]',
        required: false,
        defaultValue: defaults.colors,
        controlType: 'ordinalColors',
        group: 'Style',
    },
    {
        key: 'arcOpacity',
        help: 'Arcs opacity.',
        required: false,
        defaultValue: defaults.arcOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Style',
    },
    {
        key: 'arcBorderWidth',
        help: 'Arcs border width.',
        required: false,
        defaultValue: defaults.arcBorderWidth,
        type: 'number',
        controlType: 'lineWidth',
        group: 'Style',
    },
    {
        key: 'arcBorderColor',
        help: 'Arcs border color.',

defaultValue: defaults.innerRadiusOffset,
        type: 'number',
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.01,
        },
    },
    {
        key: 'colors',
        help: 'Defines how to compute arc/ribbon color.',
        type: 'string | Function | string[]',
        required: false,
        defaultValue: defaults.colors,
        controlType: 'ordinalColors',
        group: 'Style',
    },
    {
        key: 'arcOpacity',
        help: 'Arcs opacity.',
        required: false,
        defaultValue: defaults.arcOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Style',
    },
    {
        key: 'arcBorderWidth',
        help: 'Arcs border width.',
        required: false,

},
    {
        key: 'ribbonBorderColor',
        help: 'Ribbons border color.',
        required: false,
        defaultValue: defaults.ribbonBorderColor,
        type: 'string | object | Function',
        controlType: 'inheritedColor',
        group: 'Style',
    },
    {
        key: 'enableLabel',
        help: 'Enable/disable labels.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.enableLabel,
        controlType: 'switch',
        group: 'Labels',
    },
    {
        key: 'label',
        help:
            'Defines how to get label text, can be a string (used to access current arc data property) or a function which will receive the actual arc data.',
        type: 'string | Function',
        required: false,
        defaultValue: defaults.label,
        controlType: 'choices',
        group: 'Labels',
        controlOptions: {
            choices: ['id', 'value', `d => \`\${d.id} [\${d.value}]\``].map(choice => ({
                label: choice,
                value: choice,

required: false,
        defaultValue: defaults.innerRadiusRatio,
        type: 'number',
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.01,
        },
    },
    {
        key: 'innerRadiusOffset',
        help: 'Inner radius offset (minus innerRadiusRatio).',
        required: false,
        defaultValue: defaults.innerRadiusOffset,
        type: 'number',
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.01,
        },
    },
    {
        key: 'colors',
        help: 'Defines how to compute arc/ribbon color.',
        type: 'string | Function | string[]',
        required: false,
        defaultValue: defaults.colors,
        controlType: 'ordinalColors',

required: false,
        defaultValue: defaults.padAngle,
        type: 'number',
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.01,
        },
    },
    {
        key: 'innerRadiusRatio',
        help: 'Inner radius ratio.',
        required: false,
        defaultValue: defaults.innerRadiusRatio,
        type: 'number',
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.01,
        },
    },
    {
        key: 'innerRadiusOffset',
        help: 'Inner radius offset (minus innerRadiusRatio).',
        required: false,
        defaultValue: defaults.innerRadiusOffset,
        type: 'number',
        controlType: 'range',

Please make sure to use \`context.save()\` and
            \`context.restore()\` if you make some global
            modifications to the 2d context inside this function
            to avoid side effects.
        `,
        required: false,
        type: 'Array',
        defaultValue: defaults.layers,
    },
    {
        key: 'isInteractive',
        flavors: ['svg', 'canvas'],
        help: 'Enable/disable interactivity.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.isInteractive,
        controlType: 'switch',
        group: 'Interactivity',
    },
    {
        key: 'arcHoverOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Arc opacity when hover (0~1).',
        required: false,
        defaultValue: defaults.arcHoverOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'arcHoverOthersOpacity',
        flavors: ['svg', 'canvas'],