Adding example for legend multi select for VSBC

microsoft · Dec 13, 2024 · 5ede767 · 5ede767
1 parent 216f82e
commit 5ede767
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md
@@ -1476,6 +1476,7 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps {
     barMinimumHeight?: number;
     barWidth?: number | 'default' | 'auto';
     calloutProps?: Partial<ICalloutProps>;
+    canSelectMultipleLegends?: boolean;
     chartTitle?: string;
     // @deprecated
     colors?: string[];

diff --git a/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -651,16 +651,12 @@ export class VerticalStackedBarChartBase extends React.Component<
         overflowText={this.props.legendsOverflowText}
         {...this.props.legendProps}
         onChange={this._onLegendChange}
-        canSelectMultipleLegends
+        canSelectMultipleLegends={this.props.canSelectMultipleLegends}
       />
     );
   }
 
-  private _onLegendChange = (
-    selectedLegends: string[],
-    event: React.MouseEvent<HTMLButtonElement>,
-    legend: ILegend,
-  ) => {
+  private _onLegendChange = (selectedLegends: string[]) => {
     this.setState({ selectedLegends });
   };
 

diff --git a/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts b/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts
@@ -155,6 +155,12 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps {
    * The prop used to enable rounded corners for the chart.
    */
   roundCorners?: boolean;
+
+  /**
+   * The prop used to enable multiple legend selection.
+   * @default false
+   */
+  canSelectMultipleLegends?: boolean;
 }
 
 /**

diff --git a/...ples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/...ples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
@@ -21,6 +21,7 @@ interface IVerticalStackedBarState {
   margins: {};
   enableGradient: boolean;
   roundCorners: boolean;
+  legendMultiSelect: boolean;
 }
 
 export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVerticalStackedBarState> {
@@ -41,6 +42,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       },
       enableGradient: false,
       roundCorners: false,
+      legendMultiSelect: false,
     };
   }
 
@@ -94,6 +96,10 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
     this.setState({ roundCorners: checked });
   };
 
+  private _onToggleLegendMultiSelect = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.setState({ legendMultiSelect: checked });
+  };
+
   private _basicExample(): JSX.Element {
     const { showLine } = this.state;
     const firstChartPoints: IVSChartDataPoint[] = [
@@ -307,6 +313,13 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
           <Toggle label="Enable Gradient" onText="ON" offText="OFF" onChange={this._onEnableGradientChange} />
           &nbsp;&nbsp;
           <Toggle label="Rounded Corners" onText="ON" offText="OFF" onChange={this._onRoundCornersChange} />
+          &nbsp;&nbsp;
+          <Toggle
+            label="Select Multiple Legends"
+            onText="ON"
+            offText="OFF"
+            onChange={this._onToggleLegendMultiSelect}
+          />
         </div>
         {this.state.showAxisTitles && (
           <div style={rootStyle}>
@@ -328,6 +341,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
               xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
               enableGradient={this.state.enableGradient}
               roundCorners={this.state.roundCorners}
+              canSelectMultipleLegends={this.state.legendMultiSelect}
             />
           </div>
         )}