Free Trial Buy

Colorize Labels

All node labels are colored according to the label.font.color property. However, you can color labels like their parent nodes if you set the label.useNodeColors property to true. Refer to this article for information on node colorization.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        label: {
            useNodeColors: true
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxi-series>
        <dxo-label
            [useNodeColors]="true">
        </dxo-label>
    </dxi-series>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxLabel :use-node-colors="true" />
    </DxSankey>
</template>

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

export default {
    components: {
        DxSankey,
        DxLabel
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Label } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Label useNodeColors={true} />
            </Sankey>
        )
    }
}

export default App;
See Also