All docs
V19.1
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.
A newer version of this page is available. Switch to the current version.

margin

Generates space around the widget.

Type:

Object

WidgetMargin DevExtreme ChartJS

jQuery
index.js
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        margin: {
            top: 20,
            bottom: 20,
            left: 30,
            right: 30
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-sankey ... >
    <dxo-margin
        [top]="20"
        [bottom]="20"
        [left]="30"
        [right]="30">
    </dxo-margin>
</dx-sankey>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSankeyModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSankeyModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxSankey ... >
        <DxMargin
            :top="20"
            :bottom="20"
            :left="30"
            :right="30"
        />
    </DxSankey>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxSankey, {
    DxMargin 
} from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxMargin
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Sankey, {
    Margin 
} from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Margin
                    top={20}
                    bottom={20}
                    left={30}
                    right={30}
                />
            </Sankey>
        );
    }
}
export default App;

bottom

Specifies the bottom margin of the widget in pixels.

Type:

Number

Default Value: 0

left

Specifies the left margin of the widget in pixels.

Type:

Number

Default Value: 0

right

Specifies the right margin of the widget in pixels.

Type:

Number

Default Value: 0

top

Specifies the top margin of the widget in pixels.

Type:

Number

Default Value: 0