All docs
V20.2
20.2
20.1
19.2
19.1
18.2
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.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Colorize Labels

All node labels are colored according to the label.font.color option. However, you can color labels like their parent nodes if you set the label.useNodeColors option 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