@spteck/fluentui-react-charts 1.0.10 → 1.0.12

package/README.md

@@ -304,6 +304,31 @@ const targetData = [
   title="Sales vs Target"
   theme={webLightTheme}
 />
+ 
+> Note: ComboChart supports a backward-compatible dual-axis layout via the `axesMode` prop.
+> - Default: `axesMode="legacy"` — preserves previous behavior: a single y-axis named `y` and a non-stacked x-axis.
+> - Dual mode: `axesMode="dual"` — enables a stacked x-axis and two named y-axes: `y-bar` (left) and `y-line` (right).
+
+Usage examples:
+
+```tsx
+// legacy (default) — unchanged behavior for existing consumers
+<ComboChart
+  data={[{ label: 'Sales', data: salesData, type: 'bar' }]}
+  getPrimary={(d) => d.month}
+  getSecondary={(d) => d.value}
+/>
+
+// dual mode — bars default to 'y-bar' (stacked on x), lines default to 'y-line'
+<ComboChart
+  data={[
+    { label: 'Sales', data: salesData, type: 'bar' },
+    { label: 'Target', data: targetData, type: 'line' }
+  ]}
+  getPrimary={(d) => d.month}
+  getSecondary={(d) => d.value}
+  axesMode="dual"
+/>
 ```
 
 #### BubbleChart

package/dist/charts/ComboChart/ComboChart.d.ts

@@ -12,6 +12,11 @@ export interface ComboChartProps<T> {
     title?: string;
     showDataLabels?: boolean;
     theme?: Theme;
+    /**
+     * 'legacy' keeps previous behaviour (single 'y' axis, non-stacked x).
+     * 'dual' enables named y-axes ('y-bar' and 'y-line') and stacked x.
+     */
+    axesMode?: 'legacy' | 'dual';
 }
-export declare function ComboChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, }: ComboChartProps<T>): React.JSX.Element;
+export declare function ComboChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, axesMode, }: ComboChartProps<T>): React.JSX.Element;
 export default ComboChart;

package/dist/fluentui-react-charts.cjs.development.js

@@ -789,6 +789,22 @@ var lightenColor = function lightenColor(hex, amount) {
 var getFluentPalette = function getFluentPalette(_theme) {
   return ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
 };
+/**
+ * Returns animation configuration for instant interactions.
+ * Disables hover/tooltip animations for immediate response.
+ */
+var getInstantInteractionAnimations = function getInstantInteractionAnimations() {
+  return {
+    animation: false,
+    transitions: {
+      active: {
+        animation: {
+          duration: 0
+        }
+      }
+    }
+  };
+};
 /**
  * Smart Fluent tooltip generator with chart-type awareness.
  * Optimized for fast performance with reduced animation delays.
@@ -938,7 +954,8 @@ function useChartUtils(theme) {
       getFluentPalette: getFluentPalette,
       createFluentTooltip: createFluentTooltip,
       createAxisLabelFormatter: createAxisLabelFormatter,
-      debounce: debounce
+      debounce: debounce,
+      getInstantInteractionAnimations: getInstantInteractionAnimations
     };
   }, [theme]);
 }
@@ -1041,7 +1058,8 @@ function AreaChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1104,9 +1122,10 @@ function AreaChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1163,7 +1182,7 @@ function AreaChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1202,7 +1221,8 @@ function BarChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
@@ -1266,9 +1286,10 @@ function BarChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1351,7 +1372,7 @@ function BarChart(_ref) {
           }
         }
       })
-    };
+    });
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1393,7 +1414,8 @@ function BarHorizontalChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1452,10 +1474,11 @@ function BarHorizontalChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       indexAxis: 'y',
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1512,7 +1535,7 @@ function BarHorizontalChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1552,7 +1575,8 @@ function BubbleChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
@@ -1607,9 +1631,10 @@ function BubbleChart(_ref) {
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
     var _data$2;
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1665,7 +1690,7 @@ function BubbleChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, showDataLabels, theme, getPrimary, getSecondary, data, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1694,7 +1719,9 @@ function ComboChart(_ref) {
     _ref$showDataLabels = _ref.showDataLabels,
     showDataLabels = _ref$showDataLabels === void 0 ? false : _ref$showDataLabels,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
+    _ref$axesMode = _ref.axesMode,
+    axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1706,7 +1733,8 @@ function ComboChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1748,7 +1776,8 @@ function ComboChart(_ref) {
         return {
           type: series.type,
           label: series.label,
-          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : 'y',
+          // default yAxis assignment: legacy uses single 'y', dual uses 'y-bar'/'y-line'
+          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : axesMode === 'dual' ? series.type === 'bar' ? 'y-bar' : 'y-line' : 'y',
           data: allCategories.map(function (cat) {
             var found = series.data.find(function (d) {
               return getPrimary(d) === cat;
@@ -1779,9 +1808,10 @@ function ComboChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    var base = _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1809,9 +1839,61 @@ function ComboChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme)
-      },
+      }
+    });
+    if (axesMode === 'dual') {
+      return _extends({}, base, {
+        scales: {
+          x: {
+            stacked: true,
+            ticks: {
+              color: labelColor,
+              font: {
+                family: fontFamily,
+                size: fontSize
+              }
+            },
+            grid: {
+              color: gridColor
+            }
+          },
+          'y-bar': {
+            type: 'linear',
+            position: 'left',
+            stacked: true,
+            ticks: {
+              color: labelColor,
+              font: {
+                family: fontFamily,
+                size: fontSize
+              }
+            },
+            grid: {
+              color: gridColor
+            }
+          },
+          'y-line': {
+            type: 'linear',
+            position: 'right',
+            stacked: false,
+            ticks: {
+              color: labelColor,
+              font: {
+                family: fontFamily,
+                size: fontSize
+              }
+            },
+            grid: {
+              color: gridColor
+            }
+          }
+        }
+      });
+    }
+    return _extends({}, base, {
       scales: {
         x: {
+          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1824,7 +1906,9 @@ function ComboChart(_ref) {
           }
         },
         y: {
+          type: 'linear',
           position: 'left',
+          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1834,12 +1918,11 @@ function ComboChart(_ref) {
           },
           grid: {
             color: gridColor
-          },
-          stacked: false
+          }
         }
       }
-    };
-  }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
+    });
+  }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip, getInstantInteractionAnimations, axesMode]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1897,7 +1980,8 @@ function DoughnutChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var _useState = React.useState([]),
     hiddenLabels = _useState[0],
     setHiddenLabels = _useState[1];
@@ -1972,9 +2056,10 @@ function DoughnutChart(_ref) {
     });
   }, [allLabels, valueMap, colors]);
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         legend: {
           display: false
@@ -2006,7 +2091,7 @@ function DoughnutChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, theme, showDataLabels, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2047,7 +2132,8 @@ function FloatingBarChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2107,9 +2193,10 @@ function FloatingBarChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2164,7 +2251,7 @@ function FloatingBarChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2206,7 +2293,8 @@ function LineChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2269,9 +2357,10 @@ function LineChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2326,7 +2415,7 @@ function LineChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2434,9 +2523,10 @@ function PieChart(_ref) {
     chartData = _useMemo2.chartData,
     legendEntries = _useMemo2.legendEntries;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         tooltip: createFluentTooltip(theme),
         legend: {
@@ -2465,7 +2555,7 @@ function PieChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2526,7 +2616,8 @@ function PolarChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
-    lightenColor = _useChartUtils.lightenColor;
+    lightenColor = _useChartUtils.lightenColor,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var _useState = React.useState([]),
     hiddenLabels = _useState[0],
     setHiddenLabels = _useState[1];
@@ -2589,9 +2680,10 @@ function PolarChart(_ref) {
     };
   }, [filteredLabels, values, visibleColors]);
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2638,7 +2730,7 @@ function PolarChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2678,7 +2770,8 @@ function RadarChart(_ref) {
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
-    getFluentPalette = _useChartUtils.getFluentPalette;
+    getFluentPalette = _useChartUtils.getFluentPalette,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2737,9 +2830,10 @@ function RadarChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2792,7 +2886,7 @@ function RadarChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2831,7 +2925,8 @@ function ScatterChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2879,9 +2974,10 @@ function ScatterChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2939,7 +3035,7 @@ function ScatterChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2979,7 +3075,8 @@ function StackedLineChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -3042,9 +3139,10 @@ function StackedLineChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -3101,7 +3199,7 @@ function StackedLineChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -3143,7 +3241,8 @@ function SteamChart(_ref) {
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
-    getFluentPalette = _useChartUtils.getFluentPalette;
+    getFluentPalette = _useChartUtils.getFluentPalette,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -3217,13 +3316,10 @@ function SteamChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 800,
-        easing: 'easeOutQuart'
-      },
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -3289,7 +3385,7 @@ function SteamChart(_ref) {
           max: showPercent ? 100 : undefined
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -4113,6 +4209,7 @@ exports.SteamChart = SteamChart;
 exports.createAxisLabelFormatter = createAxisLabelFormatter;
 exports.createFluentTooltip = createFluentTooltip;
 exports.getFluentPalette = getFluentPalette;
+exports.getInstantInteractionAnimations = getInstantInteractionAnimations;
 exports.lightenColor = lightenColor;
 exports.useChartUtils = useChartUtils;
 exports.useGraphUtils = useChartUtils;