Enable reflow for all cartesian chart examples

change/@fluentui-react-charting-18c6ed5b-114e-4e6f-982f-2a59fa333f96.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable reflow for all cartesian chart examples",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx

@@ -195,6 +195,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
                 />
               ) : null
             }
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx

@@ -176,6 +176,7 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr
             legendProps={{
               allowFocusOnLegends: true,
             }}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx

@@ -97,6 +97,7 @@ export class AreaChartDataChangeExample extends React.Component<{}, IAreaChartBa
             legendProps={{
               allowFocusOnLegends: true,
             }}
+            enableReflow={true}
           />
           <DefaultButton text="Change Ydata" onClick={this._changeData} />
           <DefaultButton text="Change Xdata" onClick={this._changeXData} />

packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx

@@ -211,6 +211,7 @@ export class AreaChartLargeDataExample extends React.Component<{}, IACLargeDataE
               allowFocusOnLegends: true,
             }}
             optimizeLargeData
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx

@@ -212,6 +212,7 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi
             legendProps={{
               allowFocusOnLegends: true,
             }}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx

@@ -138,6 +138,7 @@ export class AreaChartStyledExample extends React.Component<{}, IAreaChartBasicS
             data={chartData}
             showYAxisGridLines={false}
             enablePerfOptimization={true}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx

@@ -196,6 +196,7 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
             isCalloutForStack={this.state.selectedCallout === 'StackCallout'}
             barwidth={this.state.barwidth}
             hideLabels={this.state.hideLabels}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx

@@ -204,6 +204,7 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com
             showYAxisGridLines
             wrapXAxisLables
             isCalloutForStack={this.state.selectedCallout === 'StackCallout'}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx

@@ -141,6 +141,7 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
             showYAxisGridLines
             yAxisTickCount={10}
             barwidth={43}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx

@@ -120,6 +120,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{},
                 />
               ) : null
             }
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx

@@ -392,6 +392,7 @@ export class HeatMapChartCustomAccessibilityExample extends React.Component<{},
             height={this.state.height}
             domainValuesForColorScale={[0, 600]}
             rangeValuesForColorScale={['lightblue', 'darkblue']}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx

@@ -332,6 +332,7 @@ export class HeatMapChartBasicExample extends React.Component<{}, IHeatMapChartB
             height={this.state.height}
             domainValuesForColorScale={[0, 600]}
             rangeValuesForColorScale={['lightblue', 'darkblue']}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx

@@ -56,6 +56,7 @@ export class HorizontalBarChartWithAxisTooltipExample extends React.Component<{}
             width={650}
             hideLegend={true}
             hideTooltip={false}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx

@@ -141,6 +141,7 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
                 defaultRender: IRenderFunction<IHorizontalBarChartWithAxisDataPoint>,
               ) => (props ? defaultRender(props) : null),
             })}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx

@@ -76,6 +76,7 @@ export class HorizontalBarChartWithAxisStringAxisTooltipExample extends React.Co
             hideTooltip={false}
             showYAxisLablesTooltip={this.state.selectedCallout === 'showTooltip' ? true : false}
             showYAxisLables={this.state.selectedCallout === 'expandYAxisLabels' ? true : false}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx

@@ -212,6 +212,7 @@ export class VerticalBarChartAxisTitleExample extends React.Component<IVerticalB
               ) => (props ? defaultRender(props) : null),
             })}
             hideLabels={this.state.hideLabels}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTooltip.Example.tsx

@@ -69,6 +69,7 @@ export class VerticalBarChartTooltipExample extends React.Component<{}, IVertica
             hideTooltip={false}
             showXAxisLablesTooltip={this.state.selectedCallout === 'showTooltip' ? true : false}
             wrapXAxisLables={this.state.selectedCallout === 'WrapTickValues' ? true : false}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx

@@ -210,6 +210,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
               ) => (props ? defaultRender(props) : null),
             })}
             hideLabels={this.state.hideLabels}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx

@@ -74,6 +74,7 @@ export class VerticalBarChartCustomAccessibilityExample extends React.Component<
             yAxisTickCount={6}
             colors={customColors}
             hideLegend={true}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx

@@ -53,6 +53,7 @@ export class VerticalBarChartDynamicExample extends React.Component<IVerticalBar
           yAxisTickCount={5}
           height={400}
           width={650}
+          enableReflow={true}
         />
 
         <DefaultButton text="Change data" onClick={this._changeData} />

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.RotateLabels.Example.tsx

@@ -46,6 +46,7 @@ export class VerticalBarChartRotatedLabelExample extends React.Component<{}, IVe
             width={650}
             hideLegend={true}
             rotateXAxisLables={true}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx

@@ -60,6 +60,7 @@ export class VerticalBarChartStyledExample extends React.Component<IVerticalBarC
             yAxisTickCount={6}
             colors={customColors}
             hideLegend={true}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx

@@ -69,6 +69,7 @@ export class VerticalStackedBarChartTooltipExample extends React.Component<{}, I
             width={650}
             showXAxisLablesTooltip={this.state.selectedCallout === 'showTooltip' ? true : false}
             wrapXAxisLables={this.state.selectedCallout === 'WrapTickValues' ? true : false}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx

@@ -259,6 +259,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
               allowFocusOnLegends: true,
             }}
             hideLabels={this.state.hideLabels}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx

@@ -291,6 +291,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
             })}
             allowHoverOnLegend={false}
             barWidth={this.state.barWidth}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx

@@ -210,6 +210,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
             legendProps={{
               allowFocusOnLegends: true,
             }}
+            enableReflow={true}
           />
         </div>
       </>

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx

@@ -206,6 +206,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
             svgProps={{
               'aria-label': 'Example chart with metadata per month',
             }}
+            enableReflow={true}
           />
         </div>
       </>