@spteck/fluentui-react-charts 1.1.2 → 1.1.4

package/dist/fluentui-react-charts.esm.js

@@ -762,6 +762,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).
  */
@@ -779,21 +806,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.
@@ -815,7 +831,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;
@@ -828,29 +849,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 '';
@@ -872,13 +909,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 {
@@ -1063,7 +1100,10 @@ function AreaChart(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 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 = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1079,13 +1119,14 @@ function AreaChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -1170,7 +1211,9 @@ function AreaChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1227,7 +1270,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 = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1243,13 +1289,14 @@ function BarChart(_ref) {
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = 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);
@@ -1334,7 +1381,9 @@ function BarChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: _extends({
         x: {
@@ -1419,7 +1468,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 = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1435,13 +1487,14 @@ function BarHorizontalChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -1523,7 +1576,9 @@ function BarHorizontalChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1580,8 +1635,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1597,13 +1655,14 @@ function BubbleChart(_ref) {
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = 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);
@@ -1679,7 +1738,9 @@ function BubbleChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -1739,7 +1800,10 @@ function ComboChart(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 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 = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1754,12 +1818,13 @@ function ComboChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -1858,7 +1923,9 @@ function ComboChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       }
     });
     if (axesMode === 'dual') {
@@ -1993,7 +2060,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? 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,
@@ -2023,7 +2093,7 @@ function DoughnutChart(_ref) {
   }, [data, getLabel, getValue]);
   var _useMemo = 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);
       });
@@ -2031,7 +2101,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 = useMemo(function () {
@@ -2082,7 +2152,9 @@ function DoughnutChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         title: {
           display: !!title,
           text: title,
@@ -2137,7 +2209,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2153,13 +2228,14 @@ function FloatingBarChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -2241,7 +2317,9 @@ function FloatingBarChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -2298,7 +2376,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2314,13 +2395,14 @@ function LineChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -2405,7 +2487,9 @@ function LineChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -2462,7 +2546,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? 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;
@@ -2490,7 +2577,7 @@ function PieChart(_ref) {
   }, [data, getLabel, getValue]);
   var _useMemo = 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);
       });
@@ -2511,7 +2598,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,
@@ -2546,7 +2633,9 @@ function PieChart(_ref) {
       maintainAspectRatio: false
     }, getInstantInteractionAnimations(), {
       plugins: {
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         },
@@ -2631,7 +2720,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? 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,
@@ -2660,7 +2752,7 @@ function PolarChart(_ref) {
   }, [data, getLabel, getValue]);
   var _useMemo = 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);
       });
@@ -2681,7 +2773,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,
@@ -2728,7 +2820,9 @@ function PolarChart(_ref) {
             return value;
           }
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         }
@@ -2777,7 +2871,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -2791,12 +2888,13 @@ function RadarChart(_ref) {
     getFluentPalette = _useChartUtils.getFluentPalette,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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) {
@@ -2875,7 +2973,9 @@ function RadarChart(_ref) {
             size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
           }
         },
-        tooltip: createFluentTooltip(theme),
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        }),
         legend: {
           display: false
         }
@@ -2931,7 +3031,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -2946,12 +3049,13 @@ function ScatterChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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) {
@@ -3022,7 +3126,9 @@ function ScatterChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -3080,7 +3186,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3096,13 +3205,14 @@ function StackedLineChart(_ref) {
     createFluentTooltip = _useChartUtils.createFluentTooltip,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -3187,7 +3297,9 @@ function StackedLineChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       scales: {
         x: {
@@ -3244,7 +3356,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 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    renderTooltipLabel = _ref.renderTooltipLabel,
+    _ref$paletteId = _ref.paletteId,
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3262,12 +3377,13 @@ function SteamChart(_ref) {
     getFluentPalette = _useChartUtils.getFluentPalette,
     getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = 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);
@@ -3364,7 +3480,9 @@ function SteamChart(_ref) {
         legend: {
           display: false
         },
-        tooltip: createFluentTooltip(theme)
+        tooltip: createFluentTooltip(theme, {
+          extraField: renderTooltipLabel
+        })
       },
       interaction: {
         mode: 'index',
@@ -3447,7 +3565,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) {