All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Equally-Sized Pies

The PieChart widget 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 widgets in a single size group by setting their sizeGroup options 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
    ],
    // ...
})

The widgets 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 widget can be a member of only one of them.

View Demo