React Sankey - Overview

A tooltip is a small pop-up rectangle that displays information about a sankey node or link when it is hovered over or pressed.

Sankey Tooltip

Properties that configure tooltips are collected in the tooltip object. If you want to customize a specific tooltip, assign a function to the customizeNodeTooltip or customizeLinkTooltip property, depending on whether the tooltip belongs to a sankey node or link. This function should return a configuration object for the tooltip you want to customize.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        tooltip: {
            color: "yellow",
            // Tooltips of all nodes with outgoing weight less than 1 turn red
            // Other tooltips remain yellow
            customizeNodeTooltip: function(nodeInfo) {
                return nodeInfo.weightOut < 1 ? { color: "red" } : { }
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-tooltip
        color="yellow"
        [customizeNodeTooltip]="sankey_customizeNodeTooltip">
    </dxo-tooltip>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // Tooltips of all nodes with outgoing weight less than 1 turn red
    // Other tooltips remain yellow
    sankey_customizeNodeTooltip (nodeInfo) {
        return nodeInfo.weightOut < 1 ? { color: "red" } : { }
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxTooltip
            color="yellow"
            :customize-node-tooltip="customizeNodeTooltip"
        />
    </DxSankey>
</template>

<script>
import DxSankey, { DxTooltip } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxTooltip
    },
    methods: {
        // Tooltips of all nodes with outgoing weight less than 1 turn red
        // Other tooltips remain yellow
        customizeNodeTooltip(nodeInfo) {
            return nodeInfo.weightOut < 1 ? { color: "red" } : { }
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Tooltip } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Tooltip
                    color="yellow"
                    customizeNodeTooltip={this.customizeNodeTooltip}
                />
            </Sankey>
        )
    }

    // Tooltips of all nodes with outgoing weight less than 1 turn red
    // Other tooltips remain yellow
    customizeNodeTooltip(nodeInfo) {
        return nodeInfo.weightOut < 1 ? { color: "red" } : { }
    }
}

export default App;

View Demo

See Also