React PieChart - 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
$(function() { $("#pieChartContainer1").dxPieChart({ // ... sizeGroup: "pies" }); $("#pieChartContainer2").dxPieChart({ // ... sizeGroup: "pies" }); });
Angular
<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
<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
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.