All docs
V19.2
24.1 (CTP)
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery LinearGauge - margin

Generates space around the widget.

Type:

Object

WidgetMargin DevExtreme ChartJS

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

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

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

import DxLinearGauge, {
    DxMargin 
} from 'devextreme-vue/linear-gauge';

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

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

import LinearGauge, {
    Margin 
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge ... >
                <Margin
                    top={20}
                    bottom={20}
                    left={30}
                    right={30}
                />
            </LinearGauge>
        );
    }
}
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