React PieChart - Adaptive Layout
With the ever-growing variety of platforms, today's web sites and applications cannot stay competitive without being adaptive. Supporting this modern standard, the PieChart UI component possesses an adaptive layout. This enables the PieChart to hide its accessory elements if the container is not large enough to fit them. To configure the adaptive layout, use the adaptiveLayout object. Set its height and width fields to specify the minimum container size at which the layout retains all its elements.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... adaptiveLayout: { height: 300, width: 400 } }); });
Angular
<dx-pie-chart ... > <dxo-adaptive-layout [height]="300" [width]="400"></dxo-adaptive-layout> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ...> <DxAdaptiveLayout :height="300" :width="400" /> </DxPieChart> </template> <script> import DxPieChart, { DxAdaptiveLayout } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, DxAdaptiveLayout } } </script>
React
import React from 'react'; import PieChart, { AdaptiveLayout } from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ...> <AdaptiveLayout height={300} width={400} /> </PieChart> ); } }
The layout does not automatically adapt to changes made in the UI component's container at runtime. Therefore, if you enable a user to resize the container, call the render() method after each resizing to render the PieChart in the new size.
jQuery
$("#pieChartContainer").dxPieChart("render");
Angular
import { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; renderPieChart () { this.pieChart.instance.render(); }; } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { renderPieChart() { this.$refs.pieChart.instance.render(); } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props); this.pieChartRef = React.createRef(); this.renderPieChart = () => { this.pieChart.render(); }; } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance(); } }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.