@spteck/fluentui-react-charts 1.1.2 → 1.1.4

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

@@ -769,6 +769,33 @@ function LegendContainer(props) {
   }))))));
 }
 
+var paletteDark4 = ['#F87171', '#FB923C', '#FDE047', '#86EFAC', '#7DD3FC', '#C084FC', '#F9A8D4', '#FED7AA' // Peach
+];
+var paletteLight4 = ['#DC2626', '#EA580C', '#EAB308', '#16A34A', '#0284C7', '#9333EA', '#DB2777', '#C2410C' // Peach
+];
+var paletteDark3 = ['#60A5FA', '#34D399', '#FBBF24', '#F472B6', '#A78BFA', '#FB923C', '#2DD4BF', '#FB7185' // Rose
+];
+var paletteLight3 = ['#2563EB', '#059669', '#D97706', '#DB2777', '#7C3AED', '#EA580C', '#0D9488', '#E11D48' // Rose
+];
+var paletteLight1 = ['#289CEF', '#f05075ff', '#45B0A2', '#a4262c', '#F49E31', '#A366FF', '#FCCE51', '#062843ff', '#7f7f82ff', '#376102ff', '#4e79a7'];
+var paletteLight2 = ['#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
+var paletteDark1 = ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'];
+var paletteDark2 = /*#__PURE__*/[].concat(paletteLight2);
+
+var getPalleteById = function getPalleteById(id, isDark) {
+  switch (id) {
+    case 1:
+      return isDark ? paletteDark1 : paletteLight1;
+    case 2:
+      return isDark ? paletteDark2 : paletteLight2;
+    case 3:
+      return isDark ? paletteDark3 : paletteLight3;
+    case 4:
+      return isDark ? paletteDark4 : paletteLight4;
+    default:
+      return isDark ? paletteDark1 : paletteLight1;
+  }
+};
 /**
  * Lightens a given hex color by a percentage amount (0 to 1).
  */
@@ -786,21 +813,10 @@ var lightenColor = function lightenColor(hex, amount) {
   };
   return "#" + toHex(r) + toHex(g) + toHex(b);
 };
-var getFluentPalette = function getFluentPalette(theme) {
+var getFluentPalette = function getFluentPalette(theme, paletteId) {
   // 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', // Communication Blue
-  '#f05075ff', // Deep Orange
-  '#45B0A2', // **DARK FOREST GREEN** (New)
-  '#a4262c', // Dark Red
-  '#F49E31', // Rich Purple
-  '#A366FF', // **DARK TEAL/PINE** (New)
-  '#FCCE51', // Berry
-  '#062843ff', // Navy
-  '#7f7f82ff', // Orchid
-  '#376102ff', // Moss Green (Darker than original) */
-  '#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
+  return getPalleteById(paletteId != null ? paletteId : 1, isDark);
 };
 /**
  * Returns animation configuration for instant interactions.
@@ -822,7 +838,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;
@@ -835,29 +856,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 '';
@@ -879,13 +916,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 {
@@ -1070,7 +1107,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) {
@@ -1086,13 +1126,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);
@@ -1177,7 +1218,9 @@ function AreaChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1234,7 +1277,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) {
@@ -1250,13 +1296,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);
@@ -1341,7 +1388,9 @@ function BarChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: _extends({
         x: {
@@ -1426,7 +1475,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) {
@@ -1442,13 +1494,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);
@@ -1530,7 +1583,9 @@ function BarHorizontalChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1587,8 +1642,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) {
@@ -1604,13 +1662,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);
@@ -1686,7 +1745,9 @@ function BubbleChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1746,7 +1807,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;
@@ -1761,12 +1825,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);
@@ -1865,7 +1930,9 @@ function ComboChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       }
     });
     if (axesMode === 'dual') {
@@ -2000,7 +2067,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,
@@ -2030,7 +2100,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);
       });
@@ -2038,7 +2108,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 () {
@@ -2089,7 +2159,9 @@ function DoughnutChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         title: {
           display: !!title,
           text: title,
@@ -2144,7 +2216,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) {
@@ -2160,13 +2235,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);
@@ -2248,7 +2324,9 @@ function FloatingBarChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -2305,7 +2383,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) {
@@ -2321,13 +2402,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);
@@ -2412,7 +2494,9 @@ function LineChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -2469,7 +2553,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;
@@ -2497,7 +2584,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);
       });
@@ -2518,7 +2605,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,
@@ -2553,7 +2640,9 @@ function PieChart(_ref) {
       maintainAspectRatio: false
     }, getInstantInteractionAnimations(), {
       plugins: {
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         },
@@ -2638,7 +2727,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,
@@ -2667,7 +2759,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);
       });
@@ -2688,7 +2780,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,
@@ -2735,7 +2827,9 @@ function PolarChart(_ref) {
             return value;
           }
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         }
@@ -2784,7 +2878,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;
@@ -2798,12 +2895,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) {
@@ -2882,7 +2980,9 @@ function RadarChart(_ref) {
             size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
           }
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         }
@@ -2938,7 +3038,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;
@@ -2953,12 +3056,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) {
@@ -3029,7 +3133,9 @@ function ScatterChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -3087,7 +3193,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) {
@@ -3103,13 +3212,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);
@@ -3194,7 +3304,9 @@ function StackedLineChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -3251,7 +3363,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) {
@@ -3269,12 +3384,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);
@@ -3371,7 +3487,9 @@ function SteamChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       interaction: {
         mode: 'index',
@@ -3454,7 +3572,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) {