@spteck/fluentui-react-charts 1.1.1 → 1.1.3

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

@@ -769,6 +769,18 @@ function LegendContainer(props) {
   }))))));
 }
 
+var pallete1 = ['#289CEF', '#f05075ff', '#45B0A2', '#a4262c', '#F49E31', '#A366FF', '#FCCE51', '#062843ff', '#7f7f82ff', '#376102ff', '#4e79a7'];
+var pallete2 = ['#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
+var getPalleteById = function getPalleteById(id) {
+  switch (id) {
+    case 1:
+      return pallete1;
+    case 2:
+      return pallete2;
+    default:
+      return pallete1;
+  }
+};
 /**
  * Lightens a given hex color by a percentage amount (0 to 1).
  */
@@ -786,10 +798,10 @@ var lightenColor = function lightenColor(hex, amount) {
   };
   return "#" + toHex(r) + toHex(g) + toHex(b);
 };
-var getFluentPalette = function getFluentPalette(theme) {
+var getFluentPalette = function getFluentPalette(theme, palleteId) {
   // Check if theme is dark by looking at global color tokens
   var isDark = theme.colorNeutralBackground1.startsWith('#1') || theme.colorNeutralBackground1 === '#000000';
-  return isDark ? ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'] : ['#289CEF', '#f05075ff', '#45B0A2', '#a4262c', '#F49E31', '#A366FF', '#FCCE51', '#062843ff', '#7f7f82ff', '#376102ff'];
+  return isDark ? ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'] : [].concat(getPalleteById(palleteId || 1));
 };
 /**
  * Returns animation configuration for instant interactions.
@@ -811,7 +823,12 @@ var getInstantInteractionAnimations = function getInstantInteractionAnimations()
  * Smart Fluent tooltip generator with chart-type awareness.
  * Optimized for fast performance with reduced animation delays.
  */
-function createFluentTooltip(theme) {
+function createFluentTooltip(theme,
+// optional options: allow a global extraField (string or function) that will be
+// appended to the default label. If a dataset supplies `extraField` (string or
+// array indexed by data point) that value will be used instead of the global
+// option. Example: value (x%) where x% is the extraField value.
+opts) {
   var fontFamily = theme.fontFamilyBase;
   var fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
   var tooltipBg = theme.colorNeutralBackground1;
@@ -824,29 +841,45 @@ function createFluentTooltip(theme) {
       return (_context$0$label = (_context$ = context[0]) == null ? void 0 : _context$.label) != null ? _context$0$label : '';
     },
     label: function label(item) {
-      var datasetLabel = 'label' in item.dataset && typeof item.dataset.label === 'string' ? item.dataset.label : 'Value';
+      var dataset = item.dataset;
+      var datasetLabel = 'label' in dataset && typeof dataset.label === 'string' ? dataset.label : 'Value';
       var raw = item.raw;
+      // determine extraField value, precedence: dataset.extraField > opts.extraField
+      var extra;
+      if (dataset && dataset.extraField !== undefined) {
+        var _item$dataIndex;
+        var ef = dataset.extraField;
+        // dataset extraField can be array (per-data) or single value
+        if (Array.isArray(ef)) extra = ef[(_item$dataIndex = item.dataIndex) != null ? _item$dataIndex : 0];else extra = ef;
+      } else if (opts && opts.extraField) {
+        if (typeof opts.extraField === 'function') {
+          extra = opts.extraField(item);
+        } else {
+          extra = opts.extraField;
+        }
+      }
+      var suffix = extra !== undefined && extra !== null ? " (" + String(extra) + ")" : '';
       //  Bubble format { x, y, r }
       if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw && 'r' in raw) {
         var x = raw.x,
           y = raw.y,
           r = raw.r;
-        return datasetLabel + " \u2014 x: " + x + ", y: " + y + ", r: " + r;
+        return datasetLabel + " \u2014 x: " + x + ", y: " + y + ", r: " + r + suffix;
       }
       //   Scatter format { x, y }
       if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw) {
         var _x = raw.x,
           _y = raw.y;
-        return datasetLabel + " \u2014 x: " + _x + ", y: " + _y;
+        return datasetLabel + " \u2014 x: " + _x + ", y: " + _y + suffix;
       }
       //  Floating bar [min, max]
       if (Array.isArray(raw) && raw.length === 2) {
         var min = raw[0],
           max = raw[1];
-        return datasetLabel + ": " + min + " \u2013 " + max;
+        return datasetLabel + ": " + min + " \u2013 " + max + suffix;
       }
       //  Default: single number or string
-      return datasetLabel + ": " + raw;
+      return datasetLabel + ": " + raw + suffix;
     },
     beforeTitle: function beforeTitle() {
       return '';
@@ -868,13 +901,13 @@ function createFluentTooltip(theme) {
     },
     // Provide sensible defaults for tooltip label colors using dataset colors when available
     labelColor: function labelColor(item) {
-      var _item$dataIndex, _item$dataIndex2, _ref, _ref2;
+      var _item$dataIndex2, _item$dataIndex3, _ref, _ref2;
       var ds = item.dataset || {};
       // dataset colors can be a single value or an array per data point
       var bg = ds.backgroundColor;
-      if (Array.isArray(bg)) bg = bg[(_item$dataIndex = item.dataIndex) != null ? _item$dataIndex : 0];
+      if (Array.isArray(bg)) bg = bg[(_item$dataIndex2 = item.dataIndex) != null ? _item$dataIndex2 : 0];
       var border = ds.borderColor;
-      if (Array.isArray(border)) border = border[(_item$dataIndex2 = item.dataIndex) != null ? _item$dataIndex2 : 0];
+      if (Array.isArray(border)) border = border[(_item$dataIndex3 = item.dataIndex) != null ? _item$dataIndex3 : 0];
       var backgroundColor = (_ref = bg != null ? bg : ds.pointBackgroundColor) != null ? _ref : tooltipBg;
       var borderColorOut = (_ref2 = border != null ? border : ds.pointBorderColor) != null ? _ref2 : borderColor;
       return {
@@ -1059,7 +1092,10 @@ function AreaChart(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     _ref$stacked = _ref.stacked,
-    stacked = _ref$stacked === void 0 ? false : _ref$stacked;
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1075,13 +1111,14 @@ function AreaChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -1166,7 +1203,9 @@ function AreaChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1223,7 +1262,10 @@ function BarChart(_ref) {
     showDatalabels = _ref$showDatalabels === void 0 ? false : _ref$showDatalabels,
     _ref$stacked = _ref.stacked,
     stacked = _ref$stacked === void 0 ? false : _ref$stacked,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1239,13 +1281,14 @@ function BarChart(_ref) {
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -1330,7 +1373,9 @@ function BarChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: _extends({
         x: {
@@ -1415,7 +1460,10 @@ function BarHorizontalChart(_ref) {
     _ref$showDatalabels = _ref.showDatalabels,
     showDatalabels = _ref$showDatalabels === void 0 ? false : _ref$showDatalabels,
     title = _ref.title,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1431,13 +1479,14 @@ function BarHorizontalChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -1519,7 +1568,9 @@ function BarHorizontalChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1576,8 +1627,11 @@ function BubbleChart(_ref) {
     getRadius = _ref.getRadius,
     showDataLabels = _ref.showDataLabels,
     title = _ref.title,
+    renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1593,13 +1647,14 @@ function BubbleChart(_ref) {
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -1675,7 +1730,9 @@ function BubbleChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1735,7 +1792,10 @@ function ComboChart(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     _ref$axesMode = _ref.axesMode,
-    axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode;
+    axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1750,12 +1810,13 @@ function ComboChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       acc[series.label] = lightenColor(base, 0.3);
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -1854,7 +1915,9 @@ function ComboChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       }
     });
     if (axesMode === 'dual') {
@@ -1989,7 +2052,10 @@ function DoughnutChart(_ref) {
     _ref$showDataLabels = _ref.showDataLabels,
     showDataLabels = _ref$showDataLabels === void 0 ? true : _ref$showDataLabels,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
@@ -2019,7 +2085,7 @@ function DoughnutChart(_ref) {
   }, [data, getLabel, getValue]);
   var _useMemo = React.useMemo(function () {
       var allLabels = Array.from(valueMap.keys());
-      var palette = getFluentPalette(theme);
+      var palette = getFluentPalette(theme, paletteId);
       var colors = allLabels.map(function (_, i) {
         return lightenColor(palette[i % palette.length], 0.3);
       });
@@ -2027,7 +2093,7 @@ function DoughnutChart(_ref) {
         allLabels: allLabels,
         colors: colors
       };
-    }, [valueMap, getFluentPalette, theme, lightenColor]),
+    }, [valueMap, getFluentPalette, theme, lightenColor, paletteId]),
     allLabels = _useMemo.allLabels,
     colors = _useMemo.colors;
   var _useMemo2 = React.useMemo(function () {
@@ -2078,7 +2144,9 @@ function DoughnutChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         title: {
           display: !!title,
           text: title,
@@ -2133,7 +2201,10 @@ function FloatingBarChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2149,13 +2220,14 @@ function FloatingBarChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -2237,7 +2309,9 @@ function FloatingBarChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -2294,7 +2368,10 @@ function LineChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2310,13 +2387,14 @@ function LineChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -2401,7 +2479,9 @@ function LineChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -2458,7 +2538,10 @@ function PieChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor;
@@ -2486,7 +2569,7 @@ function PieChart(_ref) {
   }, [data, getLabel, getValue]);
   var _useMemo = React.useMemo(function () {
       var allLabels = Array.from(valueMap.keys());
-      var palette = getFluentPalette(theme);
+      var palette = getFluentPalette(theme, paletteId);
       var colors = allLabels.map(function (_, i) {
         return lightenColor(palette[i % palette.length], 0.3);
       });
@@ -2507,7 +2590,7 @@ function PieChart(_ref) {
         values: values,
         visibleColors: visibleColors
       };
-    }, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels]),
+    }, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels, paletteId]),
     allLabels = _useMemo.allLabels,
     colors = _useMemo.colors,
     filteredLabels = _useMemo.filteredLabels,
@@ -2542,7 +2625,9 @@ function PieChart(_ref) {
       maintainAspectRatio: false
     }, getInstantInteractionAnimations(), {
       plugins: {
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         },
@@ -2627,7 +2712,10 @@ function PolarChart(_ref) {
     _ref$showDataLabels = _ref.showDataLabels,
     showDataLabels = _ref$showDataLabels === void 0 ? true : _ref$showDataLabels,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor,
@@ -2656,7 +2744,7 @@ function PolarChart(_ref) {
   }, [data, getLabel, getValue]);
   var _useMemo = React.useMemo(function () {
       var allLabels = Array.from(valueMap.keys());
-      var palette = getFluentPalette(theme);
+      var palette = getFluentPalette(theme, paletteId);
       var colors = allLabels.map(function (_, i) {
         return lightenColor(palette[i % palette.length], 0.3);
       });
@@ -2677,7 +2765,7 @@ function PolarChart(_ref) {
         values: values,
         visibleColors: visibleColors
       };
-    }, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels]),
+    }, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels, paletteId]),
     allLabels = _useMemo.allLabels,
     colors = _useMemo.colors,
     filteredLabels = _useMemo.filteredLabels,
@@ -2724,7 +2812,9 @@ function PolarChart(_ref) {
             return value;
           }
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         }
@@ -2773,7 +2863,10 @@ function RadarChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -2787,12 +2880,13 @@ function RadarChart(_ref) {
     getFluentPalette = _useChartUtils.getFluentPalette,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       acc[series.label] = lightenColor(base, 0.3);
       return acc;
     }, {});
-  }, [data, getFluentPalette, lightenColor, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       return prev.includes(label) ? prev.filter(function (l) {
@@ -2871,7 +2965,9 @@ function RadarChart(_ref) {
             size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
           }
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         }
@@ -2927,7 +3023,10 @@ function ScatterChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -2942,12 +3041,13 @@ function ScatterChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       acc[series.label] = lightenColor(base, 0.3);
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = React__default.useCallback(function (label) {
     setVisibleSeries(function (prev) {
       return prev.includes(label) ? prev.filter(function (l) {
@@ -3018,7 +3118,9 @@ function ScatterChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -3076,7 +3178,10 @@ function StackedLineChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3092,13 +3197,14 @@ function StackedLineChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       var color = lightenColor(base, 0.3);
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -3183,7 +3289,9 @@ function StackedLineChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -3240,7 +3348,10 @@ function SteamChart(_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,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3258,12 +3369,13 @@ function SteamChart(_ref) {
     getFluentPalette = _useChartUtils.getFluentPalette,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
+    var palette = getFluentPalette(theme, paletteId);
     return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var base = palette[idx % palette.length];
       acc[series.label] = lightenColor(base, 0.3);
       return acc;
     }, {});
-  }, [data, getFluentPalette, lightenColor, theme]);
+  }, [data, getFluentPalette, lightenColor, theme, paletteId]);
   var toggleSeries = React__default.useCallback(function (label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -3360,7 +3472,9 @@ function SteamChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       interaction: {
         mode: 'index',
@@ -3443,7 +3557,10 @@ var chartProps = function chartProps(chart) {
     },
     getSecondary: function getSecondary(d) {
       return d.value;
-    }
+    },
+    // forward optional renderTooltipLabel if provided on the chart config
+    renderTooltipLabel: chart.renderTooltipLabel,
+    paletteId: chart.paletteId
   };
 };
 var getChartComponent = function getChartComponent(chart, theme) {
@@ -3454,6 +3571,7 @@ var getChartComponent = function getChartComponent(chart, theme) {
   switch (type) {
     case 'bar':
       return React__default.createElement(BarChart, Object.assign({}, chartProps(chart), {
+        showDatalabels: showDataLabels != null ? showDataLabels : false,
         stacked: false,
         theme: fuiTheme
       }));
@@ -3464,12 +3582,16 @@ var getChartComponent = function getChartComponent(chart, theme) {
         theme: fuiTheme
       }));
     case 'area':
-      return React__default.createElement(AreaChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(AreaChart, Object.assign({
+        showDatalabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         stacked: false,
         theme: fuiTheme
       }));
     case 'bar-horizontal':
-      return React__default.createElement(BarHorizontalChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(BarHorizontalChart, Object.assign({
+        showDatalabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         stacked: true,
         theme: fuiTheme
       }));
@@ -3500,7 +3622,9 @@ var getChartComponent = function getChartComponent(chart, theme) {
         })
       }));
     case 'steam':
-      return React__default.createElement(SteamChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(SteamChart, Object.assign({
+        showDataLabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         theme: fuiTheme
       }));
     case 'floating-bar':
@@ -3514,7 +3638,9 @@ var getChartComponent = function getChartComponent(chart, theme) {
         theme: fuiTheme
       }));
     case 'stacked-line':
-      return React__default.createElement(StackedLineChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(StackedLineChart, Object.assign({
+        showDataLabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         theme: fuiTheme
       }));
     case 'doughnut':