Options

    

options = {
  width: 800,
  height: 800,
  canvasStyle: 'border: 1px solid #caced0',
  spacing: 100,
  nodeWidth: 20,
  nodeBorderWidth: 1,
  nodeBorderColor: null,
  onNodeClick: undefined,
  edgeOpacity: 0.4,
  edgeGradientFill: true,
  enableTooltip: true,
  tooltipId: 'sankey-tooltip-container',
  tooltipBorderColor: '#BCBCBC',
  tooltipBGColor: '#FFFFFF'
  tooltipTemplate: {
    return `
      <div style='display:flex;align-items:center;gap:5px;'>
        <div style='width:12px;height:12px;background-color:${source.color}'></div>
        <div>${source.title}</div>
        <div>=></div>
        <div style='width:12px;height:12px;background-color:${target.color}'></div>
        <div>${target.title}</div>
        <div>: ${value}</div> 
      </div>
    `;
  },
  fontSize: '14px',
  fontFamily: '',
  fontWeight: 400,
  fontColor: '#212121',
}

options

width: Number

The width of the graph container

height: Number

The height of the graph container

canvasStyle: String

The css styles for canvas root container

spacing: Number

The spacing from top and left of graph container

nodeWidth: Number

The width of sankey nodes

nodeBorderWidth: Number

The border width of the nodes

nodeBorderColor: Color

The border color of the nodes

onNodeClick: Function

A callback function when a node is clicked

edgeOpacity: Number

The opacity for the edges (the lines that connect the nodes)

edgeGradientFill: Boolean

Whether to use gradient blend mode when drawing edges.

enableTooltip: Boolean

Enable tooltip on hover of edges

tooltipId: String

The tooltip HTML element id

tooltipTemplate: Function

The HTML template for the tooltip

tooltipBorderColor: Color

The border color of the tooltip

tooltipBGColor: Color

The background color of the tooltip

fontSize: String

The size of font of the node labels

fontFamily: String

The font family of the node labels

fontWeight: Number

The font weight (thickness of the typeface) of the node labels

fontColor: Color

The font color of the node labels

Options

Stay Updated