JavaScript/jQuery PieChart - size
Type:
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.
jQuery
index.js
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
size: {
height: 300,
width: 600
}
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-pie-chart ... >
<dxo-size
[height]="300"
[width]="600">
</dxo-size>
</dx-pie-chart>
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 { DxPieChartModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxPieChartModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
App.vue
<template>
<DxPieChart ... >
<DxSize
:height="300"
:width="600"
/>
</DxPieChart>
</template>
<script>
import DxPieChart, {
DxSize
} from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart,
DxSize
},
// ...
}
</script>React
App.js
import React from 'react';
import PieChart, {
Size
} from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ... >
<Size
height={300}
width={600}
/>
</PieChart>
);
}
}
export default App;Alternatively, you can style the UI component's container using CSS:
jQuery
index.js
styles.css
$(function() {
$("#pieChart").dxPieChart({
// ...
});
});
#pieChart {
width: 85%;
height: 70%;
}Angular
app.component.html
app.styles.css
<dx-pie-chart ...
id="pieChart">
</dx-pie-chart>
#pieChart {
width: 85%;
height: 70%;
}Vue
App.vue
<template>
<DxPieChart ...
id="pieChart">
</DxPieChart>
</template>
<script>
import DxPieChart from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart
},
// ...
}
</script>
<style>
#pieChart {
width: 85%;
height: 70%;
}
</style>React
App.js
styles.css
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ...
id="pieChart">
</PieChart>
);
}
}
export default App;
#pieChart {
width: 85%;
height: 70%;
}Feedback