JavaScript/jQuery LinearGauge - size
Specifies the UI component's size in pixels. The default value depends on the component's orientation.
The default size of the component depends on the geometry.orientation property value:
{
height: 100,
width: 300
}{
height: 300,
width: 100
}You can specify a custom width and height for the component:
| Fixed | Relative |
|---|---|
| Assign values to the size object's height and width properties or specify a container for the component. | Specify a container for the component. The component occupies the container area. |
Assign 0 to the size object's height and width properties to hide the component.
jQuery
$(function() {
$("#linearGaugeContainer").dxLinearGauge({
// ...
size: {
height: 300,
width: 600
}
});
});Angular
<dx-linear-gauge ... >
<dxo-size
[height]="300"
[width]="600">
</dxo-size>
</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
<template>
<DxLinearGauge ... >
<DxSize
:height="300"
:width="600"
/>
</DxLinearGauge>
</template>
<script>
import DxLinearGauge, {
DxSize
} from 'devextreme-vue/linear-gauge';
export default {
components: {
DxLinearGauge,
DxSize
},
// ...
}
</script>React
import React from 'react';
import LinearGauge, {
Size
} from 'devextreme-react/linear-gauge';
class App extends React.Component {
render() {
return (
<LinearGauge ... >
<Size
height={300}
width={600}
/>
</LinearGauge>
);
}
}
export default App;Alternatively, you can use CSS to style the UI component's container:
jQuery
$(function() {
$("#linearGauge").dxLinearGauge({
// ...
});
});
#linearGauge {
width: 85%;
height: 70%;
}Angular
<dx-linear-gauge ...
id="linearGauge">
</dx-linear-gauge>
#linearGauge {
width: 85%;
height: 70%;
}Vue
<template>
<DxLinearGauge ...
id="linearGauge">
</DxLinearGauge>
</template>
<script>
import DxLinearGauge from 'devextreme-vue/linear-gauge';
export default {
components: {
DxLinearGauge
},
// ...
}
</script>
<style>
#linearGauge {
width: 85%;
height: 70%;
}
</style>React
import React from 'react';
import LinearGauge from 'devextreme-react/linear-gauge';
class App extends React.Component {
render() {
return (
<LinearGauge ...
id="linearGauge">
</LinearGauge>
);
}
}
export default App;
#linearGauge {
width: 85%;
height: 70%;
}height
Specifies the height of the UI component in pixels. The default value depends on the component's orientation.
The default height of the component depends on the geometry.orientation property value:
height: 100
height: 300
width
Specifies the width of the UI component in pixels. The default value depends on the component's orientation.
The default width of the component depends on the geometry.orientation property value:
width: 100
width: 300