Adding axis title examples for line, area, vertical bar and vertical stacked bar charts

change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Adding axis title examples for line, area, vertical bar and vertical stacked bar charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

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

@@ -2,11 +2,13 @@ import * as React from 'react';
 import { AreaChart, ICustomizedCalloutData } from '@fluentui/react-charting';
 import { IAreaChartProps, ChartHoverCard } from '@fluentui/react-charting';
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 interface IAreaChartBasicState {
   width: number;
   height: number;
   isCalloutselected: boolean;
+  showAxisTitles: boolean;
 }
 
 const options: IChoiceGroupOption[] = [
@@ -21,6 +23,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
       width: 700,
       height: 300,
       isCalloutselected: false,
+      showAxisTitles: true,
     };
   }
 
@@ -43,6 +46,11 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
     }
   };
 
+  private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.forceUpdate();
+    this.setState({ showAxisTitles: checked });
+  };
+
   private _basicExample(): JSX.Element {
     const chart1Points = [
       {
@@ -176,28 +184,64 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
         />
 
         <ChoiceGroup options={options} defaultSelectedKey="basicExample" onChange={this._onChange} label="Pick one" />
-        <div style={rootStyle}>
-          <AreaChart
-            culture={window.navigator.language}
-            height={this.state.height}
-            width={this.state.width}
-            data={chartData}
-            showYAxisGridLines={true}
-            enablePerfOptimization={true}
-            // eslint-disable-next-line react/jsx-no-bind
-            onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
-              props && this.state.isCalloutselected ? (
-                <ChartHoverCard
-                  XValue={props.x.toString()}
-                  Legend={'Custom Legend'}
-                  YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`}
-                  color={'red'}
-                />
-              ) : null
-            }
-            enableReflow={true}
-          />
-        </div>
+        <Toggle
+          label="Toggle Axis titles"
+          onText="Show axis titles"
+          offText="Hide axis titles"
+          checked={this.state.showAxisTitles}
+          onChange={this._onToggleAxisTitlesCheckChange}
+          styles={{ root: { marginTop: '10px' } }}
+        />
+        {this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <AreaChart
+              culture={window.navigator.language}
+              height={this.state.height}
+              width={this.state.width}
+              data={chartData}
+              showYAxisGridLines={true}
+              enablePerfOptimization={true}
+              // eslint-disable-next-line react/jsx-no-bind
+              onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
+                props && this.state.isCalloutselected ? (
+                  <ChartHoverCard
+                    XValue={props.x.toString()}
+                    Legend={'Custom Legend'}
+                    YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`}
+                    color={'red'}
+                  />
+                ) : null
+              }
+              enableReflow={true}
+              yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined}
+              xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
+            />
+          </div>
+        )}
+        {!this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <AreaChart
+              culture={window.navigator.language}
+              height={this.state.height}
+              width={this.state.width}
+              data={chartData}
+              showYAxisGridLines={true}
+              enablePerfOptimization={true}
+              // eslint-disable-next-line react/jsx-no-bind
+              onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
+                props && this.state.isCalloutselected ? (
+                  <ChartHoverCard
+                    XValue={props.x.toString()}
+                    Legend={'Custom Legend'}
+                    YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`}
+                    color={'red'}
+                  />
+                ) : null
+              }
+              enableReflow={true}
+            />
+          </div>
+        )}
       </>
     );
   }

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

@@ -7,6 +7,7 @@ interface ILineChartBasicState {
   width: number;
   height: number;
   allowMultipleShapes: boolean;
+  showAxisTitles: boolean;
 }
 
 export class LineChartBasicExample extends React.Component<{}, ILineChartBasicState> {
@@ -16,6 +17,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
       width: 700,
       height: 300,
       allowMultipleShapes: false,
+      showAxisTitles: true,
     };
   }
 
@@ -32,6 +34,10 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
   private _onShapeChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
     this.setState({ allowMultipleShapes: checked });
   };
+  private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.forceUpdate();
+    this.setState({ showAxisTitles: checked });
+  };
 
   private _basicExample(): JSX.Element {
     const data: IChartProps = {
@@ -143,7 +149,6 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
     };
 
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
-    const margins = { left: 35, top: 20, bottom: 35, right: 20 };
 
     return (
       <>
@@ -174,21 +179,48 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
           onChange={this._onShapeChange}
           checked={this.state.allowMultipleShapes}
         />
-        <div style={rootStyle}>
-          <LineChart
-            culture={window.navigator.language}
-            data={data}
-            legendsOverflowText={'Overflow Items'}
-            yMinValue={200}
-            yMaxValue={301}
-            height={this.state.height}
-            width={this.state.width}
-            margins={margins}
-            xAxisTickCount={10}
-            allowMultipleShapesForPoints={this.state.allowMultipleShapes}
-            enablePerfOptimization={true}
-          />
-        </div>
+        <Toggle
+          label="Toggle Axis titles"
+          onText="Show axis titles"
+          offText="Hide axis titles"
+          checked={this.state.showAxisTitles}
+          onChange={this._onToggleAxisTitlesCheckChange}
+          styles={{ root: { marginTop: '10px' } }}
+        />
+        {this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <LineChart
+              culture={window.navigator.language}
+              data={data}
+              legendsOverflowText={'Overflow Items'}
+              yMinValue={200}
+              yMaxValue={301}
+              height={this.state.height}
+              width={this.state.width}
+              xAxisTickCount={10}
+              allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+              enablePerfOptimization={true}
+              yAxisTitle={this.state.showAxisTitles ? 'Different categories of mail flow' : undefined}
+              xAxisTitle={this.state.showAxisTitles ? 'Values of each category' : undefined}
+            />
+          </div>
+        )}
+        {!this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <LineChart
+              culture={window.navigator.language}
+              data={data}
+              legendsOverflowText={'Overflow Items'}
+              yMinValue={200}
+              yMaxValue={301}
+              height={this.state.height}
+              width={this.state.width}
+              xAxisTickCount={10}
+              allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+              enablePerfOptimization={true}
+            />
+          </div>
+        )}
       </>
     );
   }