All docs
V20.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.
Box
Map
Vue

margin

Generates space around the UI component.

Type:

Object

WidgetMargin DevExtreme ChartJS

jQuery
index.js
$(function() {
    $("#polarChartContainer").dxPolarChart({
        // ...
        margin: {
            top: 20,
            bottom: 20,
            left: 30,
            right: 30
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-polar-chart ... >
    <dxo-margin
        [top]="20"
        [bottom]="20"
        [left]="30"
        [right]="30">
    </dxo-margin>
</dx-polar-chart>
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 { DxPolarChartModule } from 'devextreme-angular';

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

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

import DxPolarChart, {
    DxMargin 
} from 'devextreme-vue/polar-chart';

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

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

import PolarChart, {
    Margin 
} from 'devextreme-react/polar-chart';

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

bottom

Specifies the bottom margin of the UI component in pixels.

Type:

Number

Default Value: 0

left

Specifies the left margin of the UI component in pixels.

Type:

Number

Default Value: 0

right

Specifies the right margin of the UI component in pixels.

Type:

Number

Default Value: 0

top

Specifies the top margin of the UI component in pixels.

Type:

Number

Default Value: 0