All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Equally-Sized Pies

The PieChart UI component comprises of a pie and other elements which can affect the pie's size. This means that pies in several side-by-side PieCharts may differ in size. Collect all these UI components in a single size group by setting their sizeGroup properties to identical values to avoid this.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer1").dxPieChart({
        // ...
        sizeGroup: "pies"
    });

    $("#pieChartContainer2").dxPieChart({
        // ...
        sizeGroup: "pies"
    });
});
Angular
HTML
TypeScript
<dx-pie-chart ...
    id="pieChartContainer1"
    sizeGroup="pies">
</dx-pie-chart>

<dx-pie-chart ...
    id="pieChartContainer2"
    sizeGroup="pies">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        id="pieChartContainer1"
        size-group="pies">
    </DxPieChart>
    <DxPieChart ...
        id="pieChartContainer2"
        size-group="pies">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
             <PieChart ...
                id="pieChartContainer1"
                sizeGroup="pies">
            </PieChart>
            <PieChart ...
                id="pieChartContainer2"
                sizeGroup="pies">
            </PieChart>
        );
    }
}

The UI components should have identical layouts, that is, the same container size, title and legend position, etc. Note also that a single page can contain many size groups, but a UI component can be a member of only one of them.

View Demo