All docs
V19.2
24.1
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 BarGauge - size

Specifies the widget's size in pixels.

Type:

Object

Default Value: undefined

The widget occupies its container's entire area by default. Use the size object to specify the widget's size if it should be different from that of its container. Assign 0 to size object's height and width options to hide the widget.

jQuery
index.js
$(function() {
    $("#barGaugeContainer").dxBarGauge({
        // ...
        size: {
            height: 300,
            width: 600
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-bar-gauge ... >
    <dxo-size
        [height]="300"
        [width]="600">
    </dxo-size>
</dx-bar-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 { DxBarGaugeModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxBarGaugeModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxBarGauge ... >
        <DxSize
            :height="300"
            :width="600"
        />
    </DxBarGauge>
</template>

<script>

import DxBarGauge, {
    DxSize
} from 'devextreme-vue/bar-gauge';

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

import BarGauge, {
    Size
} from 'devextreme-react/bar-gauge';

class App extends React.Component {
    render() {
        return (
            <BarGauge ... >
                <Size
                    height={300}
                    width={600}
                />
            </BarGauge>
        );
    }
}
export default App;

Alternatively, you can style the widget's container using CSS:

jQuery
index.js
styles.css
$(function() {
    $("#barGauge").dxBarGauge({
        // ...
    });
});
#barGauge {
    width: 85%;
    height: 70%;
}
Angular
app.component.html
app.styles.css
<dx-bar-gauge ...
    id="barGauge">
</dx-bar-gauge>
#barGauge {
    width: 85%;
    height: 70%;
}
Vue
App.vue
<template>
    <DxBarGauge ...
        id="barGauge">
    </DxBarGauge>
</template>

<script>
import DxBarGauge from 'devextreme-vue/bar-gauge';

export default {
    components: {
        DxBarGauge
    },
    // ...
}
</script>

<style>
#barGauge {
    width: 85%;
    height: 70%;
}
</style>
React
App.js
styles.css
import React from 'react';

import BarGauge from 'devextreme-react/bar-gauge';

class App extends React.Component {
    render() {
        return (
            <BarGauge ...
                id="barGauge">
            </BarGauge>
        );
    }
}
export default App;
#barGauge {
    width: 85%;
    height: 70%;
}

height

Specifies the height of the widget in pixels.

Type:

Number

Default Value: undefined

width

Specifies the width of the widget in pixels.

Type:

Number

Default Value: undefined