Custom palette chord diagram

Chord Diagram styletype: "chord"

Generate chord diagrams in your brand palette — arcs and ribbons colored to match — with relationships set per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Custom palette” variant

{
  "title": "Chord sample",
  "description": "Migration flows between regions",
  "dimensions": {
    "width": 620,
    "height": 480
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-chord",
      "key": "chord",
      "type": "chord",
      "position": {
        "x": 150,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 400,
        "height": 400
      },
      "dynamic": true,
      "properties": {
        "links": [
          {
            "source": "North",
            "target": "South",
            "value": 40
          },
          {
            "source": "North",
            "target": "East",
            "value": 25
          },
          {
            "source": "North",
            "target": "West",
            "value": 15
          },
          {
            "source": "South",
            "target": "East",
            "value": 30
          },
          {
            "source": "South",
            "target": "West",
            "value": 20
          },
          {
            "source": "East",
            "target": "West",
            "value": 22
          }
        ],
        "padAngle": 2,
        "ribbonOpacity": 0.6,
        "showValues": true,
        "opacity": 1,
        "colors": [
          "#2563eb",
          "#7c3aed",
          "#c026d3",
          "#db2777",
          "#ea580c",
          "#0891b2"
        ]
      }
    }
  ]
}

Chord Diagram examples

Real renders of the custom palette chord diagram — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Channel referrals

Which channels refer to which, in a brand palette.

API overrides for this example

{
  "chord.colors": [
    "#2563eb",
    "#7c3aed",
    "#c026d3",
    "#db2777",
    "#ea580c"
  ],
  "chord.links": [
    {
      "source": "Blog",
      "target": "Docs",
      "value": 36
    },
    {
      "source": "Blog",
      "target": "Pricing",
      "value": 28
    },
    {
      "source": "Docs",
      "target": "Signup",
      "value": 40
    },
    {
      "source": "Pricing",
      "target": "Signup",
      "value": 32
    },
    {
      "source": "Signup",
      "target": "Blog",
      "value": 12
    }
  ]
}

Genre crossovers

Shared listeners between music genres.

API overrides for this example

{
  "chord.colors": [
    "#f43f5e",
    "#8b5cf6",
    "#0ea5e9",
    "#22c55e",
    "#f59e0b"
  ],
  "chord.links": [
    {
      "source": "Pop",
      "target": "Rock",
      "value": 50
    },
    {
      "source": "Pop",
      "target": "Hip-hop",
      "value": 44
    },
    {
      "source": "Rock",
      "target": "Metal",
      "value": 30
    },
    {
      "source": "Hip-hop",
      "target": "R&B",
      "value": 38
    },
    {
      "source": "R&B",
      "target": "Pop",
      "value": 26
    }
  ]
}

When to use the custom palette style

Brand-colored relationship graphics
Category-coded connection maps
Report-ready chord charts

Use it dynamically via the API

Push fresh relationships per render with '<key>.links' (or just '<key>') as [{ source, target, value }]; group colors via '<key>.groups'.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "chord.links": [
        {
            "source": "North",
            "target": "South",
            "value": 40
        },
        {
            "source": "North",
            "target": "East",
            "value": 25
        },
        {
            "source": "North",
            "target": "West",
            "value": 15
        },
        {
            "source": "South",
            "target": "East",
            "value": 30
        },
        {
            "source": "South",
            "target": "West",
            "value": 20
        },
        {
            "source": "East",
            "target": "West",
            "value": 22
        }
    ],
    "chord.padAngle": 2,
    "chord.ribbonOpacity": 0.6,
    "chord.showValues": true,
    "chord.opacity": 1,
    "chord.colors": [
        "#2563eb",
        "#7c3aed",
        "#c026d3",
        "#db2777",
        "#ea580c",
        "#0891b2"
    ]
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other chord diagram styles

Default Thin arcsCustom paletteDark

See the chord diagram component page for the full property reference and FAQs.