@hero-design/rn 8.100.2 → 8.101.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3250) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3247) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 11.4s
+created lib/index.js, es/index.js in 1m 10.6s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 20.7s
+created ., . in 20.1s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.101.0
+
+### Minor Changes
+
+- [#3943](https://github.com/Thinkei/hero-design/pull/3943) [`0eb5957f1c9ff674700266e0c3c460532c369b49`](https://github.com/Thinkei/hero-design/commit/0eb5957f1c9ff674700266e0c3c460532c369b49) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chart] Support custom color config
+
 ## 8.100.2
 
 ### Patch Changes

package/es/index.js

@@ -1785,14 +1785,14 @@ var palette$8 = {
   maasstrichtBlueLight35: maasstrichtBlue$1.lighten35,
   maasstrichtBlueLight40: maasstrichtBlue$1.lighten40,
   // Update 23 May 2025
-  primaryLite: mauve$3.base,
-  blueLite: blue$2.base,
-  greenLite: grotesqueGreen.darken10,
-  redLite: pastelRed.lighten25,
-  orangeLite: blazingBonfire.lighten30,
-  yellowLite: yellow$2.base,
-  pinkLite: pink$2.lighten40,
-  greyLite: cumberlandFog.darken15,
+  primaryLight: mauve$3.base,
+  blueLight: blue$2.base,
+  greenLight: grotesqueGreen.darken10,
+  redLight: pastelRed.lighten25,
+  orangeLight: blazingBonfire.lighten30,
+  yellowLight: yellow$2.base,
+  pinkLight: pink$2.lighten40,
+  greyLight: cumberlandFog.darken15,
   primaryMedium: violet$2.lighten20,
   blueMedium: ultramarineBlue.base,
   greenMedium: green$2.base,
@@ -18672,6 +18672,8 @@ var XAxis = function XAxis(_ref) {
 
 var DASH_ARRAY = [4, 4];
 var DEFAULT_LINE_STROKE_WIDTH = 2;
+var ERROR_COLOR_NUMBER_MISMATCH = 'styleConfig.series should have exact number of colors as the number of labels';
+var ERROR_COLOR_NOT_FOUND = 'Color {color} not found in the mobile visualization palette.';
 
 var XAxisGrid = function XAxisGrid(_ref) {
   var xAxisConfig = _ref.xAxisConfig,
@@ -18935,6 +18937,17 @@ var ChartFrame = function ChartFrame(_ref) {
   }))));
 };
 
+/**
+ * Filter elements that have no color.
+ * @param data - The data to filter.
+ * @returns The filtered data.
+ */
+var filterElementHasNoColor = function filterElementHasNoColor(data) {
+  return data.filter(function (element) {
+    return element.color !== undefined;
+  });
+};
+
 // Only use colors that are not maasstrichtBlue
 var DEFAULT_COLORS = Object.entries(palette$8).filter(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 1),
@@ -18953,11 +18966,70 @@ var DEFAULT_COLORS = Object.entries(palette$8).filter(function (_ref) {
  */
 function useColorScale(labels, customColors) {
   return useMemo(function () {
-    var palette = DEFAULT_COLORS;
+    var palette = customColors && customColors.length > 0 ? customColors : DEFAULT_COLORS;
     return ordinal().domain(labels).range(palette);
   }, [labels, customColors]);
 }
 
+/**
+ * Hook to handle custom color assignments for chart series
+ *
+ * This hook manages:
+ * 1. Validation of custom color configurations
+ * 2. Color mapping between series and palette
+ * 3. Fallback to default colors when custom colors aren't provided
+ *
+ * @throws {Error} When custom colors are invalid or don't match data series
+ */
+var useCustomColor = function useCustomColor(_ref) {
+  var data = _ref.data,
+    seriesConfig = _ref.seriesConfig;
+  // Check if custom colors are provided and non-empty
+  var hasCustomColors = Boolean(seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.length);
+  // Process and validate custom color segments
+  var customSegments = useMemo(function () {
+    if (!hasCustomColors) return undefined;
+    // Filter out segments without colors
+    var filtered = filterElementHasNoColor(seriesConfig || []);
+    // Validate: number of custom colors must match number of data series
+    if (filtered.length < data.length) {
+      throw new Error(ERROR_COLOR_NUMBER_MISMATCH);
+    }
+    // Validate: all data series must have corresponding custom colors
+    var dataLabels = new Set(data.map(function (d) {
+      return d.label;
+    }));
+    if (!filtered.every(function (series) {
+      return dataLabels.has(series.label);
+    })) {
+      throw new Error(ERROR_COLOR_NUMBER_MISMATCH);
+    }
+    return filtered;
+  }, [seriesConfig, hasCustomColors, data]);
+  // Map custom segments to actual color values from palette
+  var customColors = useMemo(function () {
+    if (!customSegments) return [];
+    // Convert color keys to actual color values
+    var colors = customSegments.map(function (series) {
+      var color = palette$8[series.color];
+      // Validate: color key must exist in palette
+      if (color === undefined) {
+        throw new Error(ERROR_COLOR_NOT_FOUND.replace('{color}', series.color));
+      }
+      return color;
+    });
+    return colors;
+  }, [customSegments]);
+  // Create color scale:
+  // - If custom colors exist, use custom color mapping
+  // - Otherwise, fall back to default color mapping
+  return useColorScale(customSegments ? customSegments.map(function (series) {
+    return series.label;
+  }) : data.map(function (series) {
+    return series.label;
+  }), customColors);
+};
+
 /**
  *     Finds a "nice" number approximately equal to x.
  * https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
@@ -19027,7 +19099,8 @@ var Line = function Line(_ref) {
     minValue = _ref.minValue,
     labels = _ref.labels,
     coordinates = _ref.coordinates,
-    color = _ref.color;
+    color = _ref.color,
+    testID = _ref.testID;
   var xStart = coordinates.xStart,
     xEnd = coordinates.xEnd,
     yStart = coordinates.yStart,
@@ -19059,8 +19132,8 @@ var Line = function Line(_ref) {
     return lineGenerator(data);
   }, [data, lineGenerator]);
   return pathData ? /*#__PURE__*/React__default.createElement(Path$1, {
-    testID: "line-path",
-    accessibilityLabel: "chart-line-maxValue:".concat(maxValue, ",minValue:").concat(minValue, ",labelsLength:").concat(labels.length),
+    testID: testID,
+    accessibilityLabel: "chart-line-maxValue:".concat(maxValue, ",minValue:").concat(minValue, ",labelsLength:").concat(labels.length, ",color:").concat(color),
     d: pathData,
     stroke: color || theme.colors.secondary,
     strokeWidth: DEFAULT_LINE_STROKE_WIDTH,
@@ -19078,7 +19151,8 @@ var LineChart = function LineChart(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     headerConfig = _ref.headerConfig,
-    emptyText = _ref.emptyText;
+    emptyText = _ref.emptyText,
+    styleConfig = _ref.styleConfig;
   var _useState = useState({
       width: 0,
       height: 0
@@ -19086,9 +19160,10 @@ var LineChart = function LineChart(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     chartSize = _useState2[0],
     setChartSize = _useState2[1];
-  var colorScale = useColorScale(data.map(function (series) {
-    return series.label;
-  }));
+  var colorScale = useCustomColor({
+    data: data,
+    seriesConfig: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.series
+  });
   var niceValues = useMemo(function () {
     var maxDataValue = maxValueFromDataSet(data);
     var minDataValue = minValueFromDataSet(data);
@@ -19129,6 +19204,7 @@ var LineChart = function LineChart(_ref) {
       var _calculatedXAxisConfi;
       return /*#__PURE__*/React__default.createElement(Line, {
         color: colorScale(series.label),
+        testID: "line-".concat(series.label),
         key: series.label,
         data: series.data,
         coordinates: coordinates,
@@ -19195,7 +19271,7 @@ var Segment = function Segment(_ref) {
     height: adjustedHeight,
     rx: width / 2,
     fill: color,
-    accessibilityLabel: "Column segment: value ".concat(value, ", x-label ").concat(xLabel, ", series ").concat(seriesLabel),
+    accessibilityLabel: "Column segment: value ".concat(value, ", x-label ").concat(xLabel, ", series ").concat(seriesLabel, ", color ").concat(color),
     testID: testID,
     onPress: onPress
   });
@@ -19219,7 +19295,8 @@ var StackedSegment = function StackedSegment(_ref) {
     coordinates = _ref.coordinates,
     xCenter = _ref.xCenter,
     xIndex = _ref.xIndex,
-    onBarPress = _ref.onBarPress;
+    onBarPress = _ref.onBarPress,
+    colorScale = _ref.colorScale;
   var yStart = coordinates.yStart,
     yEnd = coordinates.yEnd;
   var stackedMaxY = (_yAxisConfig$maxValue = yAxisConfig.maxValue) !== null && _yAxisConfig$maxValue !== void 0 ? _yAxisConfig$maxValue : 0;
@@ -19230,7 +19307,6 @@ var StackedSegment = function StackedSegment(_ref) {
     yEnd: yEnd
   });
   var yStack = 0; // running sum for stacking
-  var colorScale = useColorScale(seriesLabels);
   return stackedData.map(function (value, index) {
     // If value is undefined, skip this segment
     if (value === undefined) {
@@ -19248,7 +19324,7 @@ var StackedSegment = function StackedSegment(_ref) {
       xCenter: xCenter,
       y: y1,
       height: colHeight,
-      color: colorScale(seriesLabel),
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(seriesLabel),
       value: value,
       xLabel: xLabel,
       seriesLabel: seriesLabel,
@@ -19281,7 +19357,8 @@ var ColumnChartContent = function ColumnChartContent(_ref) {
     data = _ref.data,
     yAxisConfig = _ref.yAxisConfig,
     xAxisConfig = _ref.xAxisConfig,
-    onBarPress = _ref.onBarPress;
+    onBarPress = _ref.onBarPress,
+    colorScale = _ref.colorScale;
   var yStart = coordinates.yStart,
     yEnd = coordinates.yEnd,
     xStart = coordinates.xStart,
@@ -19319,10 +19396,11 @@ var ColumnChartContent = function ColumnChartContent(_ref) {
         xCenter: x + scaleX.bandwidth() / 2,
         seriesLabels: seriesLabels,
         xIndex: xIdx,
-        onBarPress: onBarPress
+        onBarPress: onBarPress,
+        colorScale: colorScale
       });
     });
-  }, [xLabels, data, xStart, yStart, xEnd, yEnd, onBarPress, yAxisConfig]);
+  }, [xLabels, data, xStart, yStart, xEnd, yEnd, onBarPress, yAxisConfig, colorScale]);
   return /*#__PURE__*/React__default.createElement(G, {
     testID: "column-chart-content"
   }, columns);
@@ -19365,7 +19443,12 @@ var ColumnChart = function ColumnChart(_ref) {
     testID = _ref.testID,
     headerConfig = _ref.headerConfig,
     emptyText = _ref.emptyText,
-    onBarPress = _ref.onBarPress;
+    onBarPress = _ref.onBarPress,
+    styleConfig = _ref.styleConfig;
+  var colorScale = useCustomColor({
+    data: data,
+    seriesConfig: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.series
+  });
   var xLabels = useMemo(function () {
     var _data$;
     return xAxisConfig.labels && xAxisConfig.labels.length > 0 ? xAxisConfig.labels : ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.data.map(function (_, index) {
@@ -19459,7 +19542,8 @@ var ColumnChart = function ColumnChart(_ref) {
         data: data,
         xAxisConfig: calculatedXAxisConfig,
         yAxisConfig: calculatedYAxisConfig,
-        onBarPress: onBarPress
+        onBarPress: onBarPress,
+        colorScale: colorScale
       });
     }
   }));

package/lib/index.js

@@ -1814,14 +1814,14 @@ var palette$8 = {
   maasstrichtBlueLight35: maasstrichtBlue$1.lighten35,
   maasstrichtBlueLight40: maasstrichtBlue$1.lighten40,
   // Update 23 May 2025
-  primaryLite: mauve$3.base,
-  blueLite: blue$2.base,
-  greenLite: grotesqueGreen.darken10,
-  redLite: pastelRed.lighten25,
-  orangeLite: blazingBonfire.lighten30,
-  yellowLite: yellow$2.base,
-  pinkLite: pink$2.lighten40,
-  greyLite: cumberlandFog.darken15,
+  primaryLight: mauve$3.base,
+  blueLight: blue$2.base,
+  greenLight: grotesqueGreen.darken10,
+  redLight: pastelRed.lighten25,
+  orangeLight: blazingBonfire.lighten30,
+  yellowLight: yellow$2.base,
+  pinkLight: pink$2.lighten40,
+  greyLight: cumberlandFog.darken15,
   primaryMedium: violet$2.lighten20,
   blueMedium: ultramarineBlue.base,
   greenMedium: green$2.base,
@@ -18701,6 +18701,8 @@ var XAxis = function XAxis(_ref) {
 
 var DASH_ARRAY = [4, 4];
 var DEFAULT_LINE_STROKE_WIDTH = 2;
+var ERROR_COLOR_NUMBER_MISMATCH = 'styleConfig.series should have exact number of colors as the number of labels';
+var ERROR_COLOR_NOT_FOUND = 'Color {color} not found in the mobile visualization palette.';
 
 var XAxisGrid = function XAxisGrid(_ref) {
   var xAxisConfig = _ref.xAxisConfig,
@@ -18964,6 +18966,17 @@ var ChartFrame = function ChartFrame(_ref) {
   }))));
 };
 
+/**
+ * Filter elements that have no color.
+ * @param data - The data to filter.
+ * @returns The filtered data.
+ */
+var filterElementHasNoColor = function filterElementHasNoColor(data) {
+  return data.filter(function (element) {
+    return element.color !== undefined;
+  });
+};
+
 // Only use colors that are not maasstrichtBlue
 var DEFAULT_COLORS = Object.entries(palette$8).filter(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 1),
@@ -18982,11 +18995,70 @@ var DEFAULT_COLORS = Object.entries(palette$8).filter(function (_ref) {
  */
 function useColorScale(labels, customColors) {
   return React.useMemo(function () {
-    var palette = DEFAULT_COLORS;
+    var palette = customColors && customColors.length > 0 ? customColors : DEFAULT_COLORS;
     return ordinal().domain(labels).range(palette);
   }, [labels, customColors]);
 }
 
+/**
+ * Hook to handle custom color assignments for chart series
+ *
+ * This hook manages:
+ * 1. Validation of custom color configurations
+ * 2. Color mapping between series and palette
+ * 3. Fallback to default colors when custom colors aren't provided
+ *
+ * @throws {Error} When custom colors are invalid or don't match data series
+ */
+var useCustomColor = function useCustomColor(_ref) {
+  var data = _ref.data,
+    seriesConfig = _ref.seriesConfig;
+  // Check if custom colors are provided and non-empty
+  var hasCustomColors = Boolean(seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.length);
+  // Process and validate custom color segments
+  var customSegments = React.useMemo(function () {
+    if (!hasCustomColors) return undefined;
+    // Filter out segments without colors
+    var filtered = filterElementHasNoColor(seriesConfig || []);
+    // Validate: number of custom colors must match number of data series
+    if (filtered.length < data.length) {
+      throw new Error(ERROR_COLOR_NUMBER_MISMATCH);
+    }
+    // Validate: all data series must have corresponding custom colors
+    var dataLabels = new Set(data.map(function (d) {
+      return d.label;
+    }));
+    if (!filtered.every(function (series) {
+      return dataLabels.has(series.label);
+    })) {
+      throw new Error(ERROR_COLOR_NUMBER_MISMATCH);
+    }
+    return filtered;
+  }, [seriesConfig, hasCustomColors, data]);
+  // Map custom segments to actual color values from palette
+  var customColors = React.useMemo(function () {
+    if (!customSegments) return [];
+    // Convert color keys to actual color values
+    var colors = customSegments.map(function (series) {
+      var color = palette$8[series.color];
+      // Validate: color key must exist in palette
+      if (color === undefined) {
+        throw new Error(ERROR_COLOR_NOT_FOUND.replace('{color}', series.color));
+      }
+      return color;
+    });
+    return colors;
+  }, [customSegments]);
+  // Create color scale:
+  // - If custom colors exist, use custom color mapping
+  // - Otherwise, fall back to default color mapping
+  return useColorScale(customSegments ? customSegments.map(function (series) {
+    return series.label;
+  }) : data.map(function (series) {
+    return series.label;
+  }), customColors);
+};
+
 /**
  *     Finds a "nice" number approximately equal to x.
  * https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
@@ -19056,7 +19128,8 @@ var Line = function Line(_ref) {
     minValue = _ref.minValue,
     labels = _ref.labels,
     coordinates = _ref.coordinates,
-    color = _ref.color;
+    color = _ref.color,
+    testID = _ref.testID;
   var xStart = coordinates.xStart,
     xEnd = coordinates.xEnd,
     yStart = coordinates.yStart,
@@ -19088,8 +19161,8 @@ var Line = function Line(_ref) {
     return lineGenerator(data);
   }, [data, lineGenerator]);
   return pathData ? /*#__PURE__*/React__namespace.default.createElement(Svg.Path, {
-    testID: "line-path",
-    accessibilityLabel: "chart-line-maxValue:".concat(maxValue, ",minValue:").concat(minValue, ",labelsLength:").concat(labels.length),
+    testID: testID,
+    accessibilityLabel: "chart-line-maxValue:".concat(maxValue, ",minValue:").concat(minValue, ",labelsLength:").concat(labels.length, ",color:").concat(color),
     d: pathData,
     stroke: color || theme.colors.secondary,
     strokeWidth: DEFAULT_LINE_STROKE_WIDTH,
@@ -19107,7 +19180,8 @@ var LineChart = function LineChart(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     headerConfig = _ref.headerConfig,
-    emptyText = _ref.emptyText;
+    emptyText = _ref.emptyText,
+    styleConfig = _ref.styleConfig;
   var _useState = React.useState({
       width: 0,
       height: 0
@@ -19115,9 +19189,10 @@ var LineChart = function LineChart(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     chartSize = _useState2[0],
     setChartSize = _useState2[1];
-  var colorScale = useColorScale(data.map(function (series) {
-    return series.label;
-  }));
+  var colorScale = useCustomColor({
+    data: data,
+    seriesConfig: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.series
+  });
   var niceValues = React.useMemo(function () {
     var maxDataValue = maxValueFromDataSet(data);
     var minDataValue = minValueFromDataSet(data);
@@ -19158,6 +19233,7 @@ var LineChart = function LineChart(_ref) {
       var _calculatedXAxisConfi;
       return /*#__PURE__*/React__namespace.default.createElement(Line, {
         color: colorScale(series.label),
+        testID: "line-".concat(series.label),
         key: series.label,
         data: series.data,
         coordinates: coordinates,
@@ -19224,7 +19300,7 @@ var Segment = function Segment(_ref) {
     height: adjustedHeight,
     rx: width / 2,
     fill: color,
-    accessibilityLabel: "Column segment: value ".concat(value, ", x-label ").concat(xLabel, ", series ").concat(seriesLabel),
+    accessibilityLabel: "Column segment: value ".concat(value, ", x-label ").concat(xLabel, ", series ").concat(seriesLabel, ", color ").concat(color),
     testID: testID,
     onPress: onPress
   });
@@ -19248,7 +19324,8 @@ var StackedSegment = function StackedSegment(_ref) {
     coordinates = _ref.coordinates,
     xCenter = _ref.xCenter,
     xIndex = _ref.xIndex,
-    onBarPress = _ref.onBarPress;
+    onBarPress = _ref.onBarPress,
+    colorScale = _ref.colorScale;
   var yStart = coordinates.yStart,
     yEnd = coordinates.yEnd;
   var stackedMaxY = (_yAxisConfig$maxValue = yAxisConfig.maxValue) !== null && _yAxisConfig$maxValue !== void 0 ? _yAxisConfig$maxValue : 0;
@@ -19259,7 +19336,6 @@ var StackedSegment = function StackedSegment(_ref) {
     yEnd: yEnd
   });
   var yStack = 0; // running sum for stacking
-  var colorScale = useColorScale(seriesLabels);
   return stackedData.map(function (value, index) {
     // If value is undefined, skip this segment
     if (value === undefined) {
@@ -19277,7 +19353,7 @@ var StackedSegment = function StackedSegment(_ref) {
       xCenter: xCenter,
       y: y1,
       height: colHeight,
-      color: colorScale(seriesLabel),
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(seriesLabel),
       value: value,
       xLabel: xLabel,
       seriesLabel: seriesLabel,
@@ -19310,7 +19386,8 @@ var ColumnChartContent = function ColumnChartContent(_ref) {
     data = _ref.data,
     yAxisConfig = _ref.yAxisConfig,
     xAxisConfig = _ref.xAxisConfig,
-    onBarPress = _ref.onBarPress;
+    onBarPress = _ref.onBarPress,
+    colorScale = _ref.colorScale;
   var yStart = coordinates.yStart,
     yEnd = coordinates.yEnd,
     xStart = coordinates.xStart,
@@ -19348,10 +19425,11 @@ var ColumnChartContent = function ColumnChartContent(_ref) {
         xCenter: x + scaleX.bandwidth() / 2,
         seriesLabels: seriesLabels,
         xIndex: xIdx,
-        onBarPress: onBarPress
+        onBarPress: onBarPress,
+        colorScale: colorScale
       });
     });
-  }, [xLabels, data, xStart, yStart, xEnd, yEnd, onBarPress, yAxisConfig]);
+  }, [xLabels, data, xStart, yStart, xEnd, yEnd, onBarPress, yAxisConfig, colorScale]);
   return /*#__PURE__*/React__namespace.default.createElement(Svg.G, {
     testID: "column-chart-content"
   }, columns);
@@ -19394,7 +19472,12 @@ var ColumnChart = function ColumnChart(_ref) {
     testID = _ref.testID,
     headerConfig = _ref.headerConfig,
     emptyText = _ref.emptyText,
-    onBarPress = _ref.onBarPress;
+    onBarPress = _ref.onBarPress,
+    styleConfig = _ref.styleConfig;
+  var colorScale = useCustomColor({
+    data: data,
+    seriesConfig: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.series
+  });
   var xLabels = React.useMemo(function () {
     var _data$;
     return xAxisConfig.labels && xAxisConfig.labels.length > 0 ? xAxisConfig.labels : ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.data.map(function (_, index) {
@@ -19488,7 +19571,8 @@ var ColumnChart = function ColumnChart(_ref) {
         data: data,
         xAxisConfig: calculatedXAxisConfig,
         yAxisConfig: calculatedYAxisConfig,
-        onBarPress: onBarPress
+        onBarPress: onBarPress,
+        colorScale: colorScale
       });
     }
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.100.2",
+  "version": "8.101.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Chart/ColumnChart/ColumnChartContent.tsx

@@ -4,10 +4,10 @@
 
 import React, { memo, useMemo } from 'react';
 import { G } from 'react-native-svg';
-import { DataValue, Series, XAxisConfig, YAxisConfig } from '../types';
+import { deepCompareValue } from '../../../utils/helpers';
 import useScaleBandX from '../shared/hooks/useScaleBandX';
+import { DataValue, Series, XAxisConfig, YAxisConfig } from '../types';
 import StackedSegment from './StackedSegment';
-import { deepCompareValue } from '../../../utils/helpers';
 
 interface ColumnChartContentProps {
   coordinates: { yStart: number; yEnd: number; xStart: number; xEnd: number };
@@ -24,6 +24,10 @@ interface ColumnChartContentProps {
     seriesIndex: number;
     xIndex: number;
   }) => void;
+  /**
+   * A function that maps series labels to colors.
+   */
+  colorScale?: (label: string) => string | undefined;
 }
 
 /**
@@ -37,6 +41,7 @@ const ColumnChartContent = ({
   yAxisConfig,
   xAxisConfig,
   onBarPress,
+  colorScale,
 }: ColumnChartContentProps) => {
   const { yStart, yEnd, xStart, xEnd } = coordinates;
 
@@ -74,10 +79,21 @@ const ColumnChartContent = ({
           seriesLabels={seriesLabels}
           xIndex={xIdx}
           onBarPress={onBarPress}
+          colorScale={colorScale}
         />
       );
     });
-  }, [xLabels, data, xStart, yStart, xEnd, yEnd, onBarPress, yAxisConfig]);
+  }, [
+    xLabels,
+    data,
+    xStart,
+    yStart,
+    xEnd,
+    yEnd,
+    onBarPress,
+    yAxisConfig,
+    colorScale,
+  ]);
 
   return <G testID="column-chart-content">{columns}</G>;
 };

package/src/components/Chart/ColumnChart/Segment.tsx

@@ -56,7 +56,7 @@ const Segment = ({
       height={adjustedHeight}
       rx={width / 2}
       fill={color}
-      accessibilityLabel={`Column segment: value ${value}, x-label ${xLabel}, series ${seriesLabel}`}
+      accessibilityLabel={`Column segment: value ${value}, x-label ${xLabel}, series ${seriesLabel}, color ${color}`}
       testID={testID}
       onPress={onPress}
     />

package/src/components/Chart/ColumnChart/StackedSegment.tsx

@@ -3,11 +3,10 @@
 // Each segment represents a value from a different series, stacked vertically. Uses the Segment component for rendering each bar.
 
 import React, { memo } from 'react';
-import Segment from './Segment';
-import { DataValue, YAxisConfig } from '../types';
-import useScaleLinearY from '../shared/hooks/useScaleLinearY';
-import useColorScale from '../shared/hooks/useColorScale';
 import { deepCompareValue } from '../../../utils/helpers';
+import useScaleLinearY from '../shared/hooks/useScaleLinearY';
+import { DataValue, YAxisConfig } from '../types';
+import Segment from './Segment';
 
 interface StackedSegmentProps {
   stackedData: Array<DataValue>;
@@ -27,6 +26,10 @@ interface StackedSegmentProps {
     seriesIndex: number;
     xIndex: number;
   }) => void;
+  /**
+   * A function that maps series labels to colors.
+   */
+  colorScale?: (label: string) => string | undefined;
 }
 
 /**
@@ -43,6 +46,7 @@ const StackedSegment: React.FC<StackedSegmentProps> = ({
   xCenter,
   xIndex,
   onBarPress,
+  colorScale,
 }) => {
   const { yStart, yEnd } = coordinates;
   const stackedMaxY = yAxisConfig.maxValue ?? 0;
@@ -54,7 +58,7 @@ const StackedSegment: React.FC<StackedSegmentProps> = ({
   });
 
   let yStack = 0; // running sum for stacking
-  const colorScale = useColorScale(seriesLabels);
+
   return stackedData.map((value, index) => {
     // If value is undefined, skip this segment
     if (value === undefined) {
@@ -74,7 +78,7 @@ const StackedSegment: React.FC<StackedSegmentProps> = ({
         xCenter={xCenter}
         y={y1}
         height={colHeight}
-        color={colorScale(seriesLabel)}
+        color={colorScale?.(seriesLabel)}
         value={value}
         xLabel={xLabel}
         seriesLabel={seriesLabel}

package/src/components/Chart/ColumnChart/__tests__/Segment.spec.tsx

@@ -25,7 +25,7 @@ describe('Segment', () => {
 
     const segment = getByTestId('test-segment');
     expect(segment.props.accessibilityLabel).toBe(
-      'Column segment: value 10, x-label A, series Series 1'
+      'Column segment: value 10, x-label A, series Series 1, color #000000'
     );
   });