React Chart - size

Specifies the UI component's size in pixels.

Type:

Object

Default Value: undefined

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>
  • <DxChart ... >
  • <DxSize
  • :height="300"
  • :width="600"
  • />
  • </DxChart>
  • </template>
  •  
  • <script>
  •  
  • import DxChart, {
  • DxSize
  • } from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart,
  • DxSize
  • },
  • // ...
  • }
  • </script>

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

App.vue
  • <template>
  • <DxChart ...
  • id="chart">
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart
  • },
  • // ...
  • }
  • </script>
  •  
  • <style>
  • #chart {
  • width: 85%;
  • height: 70%;
  • }
  • </style>

height

Specifies the height of the UI component in pixels.

Type:

Number

Default Value: undefined

width

Specifies the width of the UI component in pixels.

Type:

Number

Default Value: undefined