Custom Tooltips

ApexSankey shows a tooltip when hovering an edge, and can show a separate tooltip for nodes. Both can be fully replaced with custom HTML.

Edge tooltip

tooltipTemplate receives a TooltipContent object with the source node, target node, and flow value. Return an HTML string:

const sankey = new ApexSankey(document.getElementById('chart'), {
  tooltipTemplate: ({ source, target, value }) => `
    <div style="display:flex;align-items:center;gap:6px;padding:4px 8px;">
      <span style="width:10px;height:10px;background:${source.color};border-radius:2px;"></span>
      <strong>${source.title}</strong>
      <span>→</span>
      <span style="width:10px;height:10px;background:${target.color};border-radius:2px;"></span>
      <strong>${target.title}</strong>
      <span>: ${value}</span>
    </div>
  `,
})
sankey.render(data)

TooltipContent fields

Field	Type	Description
source	NodeData | null	Source node data: { id, title, color, ... }
target	NodeData | null	Target node data
value	number	Flow value of the hovered edge

Node tooltip

nodeTooltipTemplate receives a NodeTooltipContent object with the node and its total value:

const sankey = new ApexSankey(el, {
  nodeTooltipTemplate: ({ node, value }) => `
    <div style="padding:6px 10px;">
      <div style="display:flex;align-items:center;gap:6px;">
        <span style="width:10px;height:10px;background:${node.color};border-radius:2px;"></span>
        <strong>${node.title}</strong>
      </div>
      <div style="font-size:12px;color:#64748B;margin-top:2px;">
        Total: ${value}
      </div>
    </div>
  `,
})
sankey.render(data)

NodeTooltipContent fields

Field	Type	Description
node	NodeData | null	Node data: { id, title, color, ... }
value	number	Total flow through the node

Enabling and disabling

enableTooltip controls the edge tooltip. It is true by default.

const sankey = new ApexSankey(el, {
  enableTooltip: false,   // no edge tooltip
})

Tooltip theme presets

tooltipTheme is a shortcut that sets the background, border, and font color to a built-in light or dark preset. It overrides tooltipBGColor, tooltipBorderColor, and tooltipFontColor.

const sankey = new ApexSankey(el, {
  tooltipTheme: 'dark',
})

Value	Effect
'light'	Light background, dark text (default appearance)
'dark'	Dark background, light text

Manual tooltip colors

Set the container colors individually when you are not using a tooltipTheme preset. These style the container that wraps your template output.

Option	Type	Default	Description
tooltipBGColor	string	'#FFFFFF'	Background color
tooltipBorderColor	string	'#E2E8F0'	Border color
tooltipFontColor	string	'#1a1a1a'	Text color
tooltipId	string	'apexsankey-tooltip-container'	HTML id of the tooltip container

const sankey = new ApexSankey(el, {
  tooltipBGColor: '#0F172A',
  tooltipBorderColor: '#1E293B',
  tooltipFontColor: '#F1F5F9',
})

Combined example

const sankey = new ApexSankey(document.getElementById('chart'), {
  enableTooltip: true,
  tooltipTheme: 'dark',
  tooltipTemplate: ({ source, target, value }) => `
    <div style="padding:6px 10px;">
      ${source.title} → ${target.title}: <strong>${value}</strong>
    </div>
  `,
  nodeTooltipTemplate: ({ node, value }) => `
    <div style="padding:6px 10px;">
      <strong>${node.title}</strong> — total ${value}
    </div>
  `,
})
sankey.render(data)

React example

import { ApexSankey } from 'react-apexsankey'

const options = {
  tooltipTheme: 'light' as const,
  tooltipTemplate: ({ source, target, value }: any) =>
    `<div style="padding:6px 10px">${source.title} → ${target.title}: <b>${value}</b></div>`,
  nodeTooltipTemplate: ({ node, value }: any) =>
    `<div style="padding:6px 10px"><b>${node.title}</b> — ${value}</div>`,
}

export default function TooltipSankey() {
  return <ApexSankey data={data} options={options} />
}