Vue 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-sankey-tooltip
        color="yellow"
        [customizeNodeTooltip]="sankey_customizeNodeTooltip">
    </dxo-sankey-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.tsx
import React from 'react';
import Sankey, { Tooltip } from 'devextreme-react/sankey';

// Tooltips of all nodes with outgoing weight less than 1 turn red
// Other tooltips remain yellow
const customizeNodeTooltip = (nodeInfo: { weightOut?: number }) => {
    return (nodeInfo.weightOut ?? 0) < 1 ? { color: 'red' } : {};
};

function App() {
    return (
        <Sankey ... >
            <Tooltip
                color="yellow"
                customizeNodeTooltip={customizeNodeTooltip}
            />
        </Sankey>
    );
}

export default App;

View Demo

See Also