Angular LinearGauge - size
The UI component occupies its container's entire area by default. Use the size object to specify the UI component's size if it should be different from that of its container. Assign 0 to size object's height and width properties to hide the UI component.
App.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>
Alternatively, you can style the UI component's container using CSS:
App.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>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.