All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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