bento-charts 2.13.1 → 2.14.0

package/dist/Components/Charts/BaseBarChart.d.ts

@@ -1,3 +1,3 @@
-import type { BaseBarChartProps } from '../../types/chartTypes';
-declare const BaseBarChart: ({ height, width, units, title, onClick, onChartClick, chartFill, otherFill, ...params }: BaseBarChartProps) => import("react/jsx-runtime").JSX.Element;
+import { BaseBarChartProps } from '../../types/chartTypes';
+declare const BaseBarChart: ({ height, width, units, title, onClick, onChartClick, chartFill, otherFill, showBarCounts, barCountFillMode, ...params }: BaseBarChartProps) => import("react/jsx-runtime").JSX.Element;
 export default BaseBarChart;

package/dist/Components/Charts/BaseBarChart.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
 import { Bar, BarChart, CartesianGrid, Cell, Label, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { TOOLTIP_STYLE, COUNT_STYLE, LABEL_STYLE, MAX_TICK_LABEL_CHARS, TITLE_STYLE, TICKS_SHOW_ALL_LABELS_BELOW, UNITS_LABEL_OFFSET, TICK_MARGIN, COUNT_KEY, } from '../../constants/chartConstants';
 import { useChartTranslation } from '../../ChartConfigProvider';
@@ -23,10 +34,19 @@ var tickFormatter = function (tickLabel) {
     }
     return "".concat(tickLabel.substring(0, MAX_TICK_LABEL_CHARS), "...");
 };
-var BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+var BAR_CHART_MARGINS = { bottom: 100, right: 0 };
+var BAR_CHART_MARGIN_TOP_COUNTS = 35;
+var BAR_CHART_MARGIN_TOP_NO_COUNTS = 10;
+var MIN_BAR_WIDTH_FOR_COUNTS = 11;
+var BAR_LABEL_SPACING = 4; // Spacing of a BarLabel above the actual bar, in pixels.
+var BAR_LABEL_APPROX_NUMBER_WIDTH = 9.2;
 var BaseBarChart = function (_a) {
-    var height = _a.height, width = _a.width, units = _a.units, title = _a.title, onClick = _a.onClick, onChartClick = _a.onChartClick, chartFill = _a.chartFill, otherFill = _a.otherFill, params = __rest(_a, ["height", "width", "units", "title", "onClick", "onChartClick", "chartFill", "otherFill"]);
+    var height = _a.height, width = _a.width, units = _a.units, title = _a.title, onClick = _a.onClick, onChartClick = _a.onChartClick, chartFill = _a.chartFill, otherFill = _a.otherFill, showBarCounts = _a.showBarCounts, barCountFillMode = _a.barCountFillMode, params = __rest(_a, ["height", "width", "units", "title", "onClick", "onChartClick", "chartFill", "otherFill", "showBarCounts", "barCountFillMode"]);
+    showBarCounts = showBarCounts !== null && showBarCounts !== void 0 ? showBarCounts : true; // Show bar counts by default
     var t = useChartTranslation();
+    var margins = useMemo(function () { return (__assign(__assign({}, BAR_CHART_MARGINS), { 
+        // Top margin needs to accommodate bar count labels:
+        top: showBarCounts ? BAR_CHART_MARGIN_TOP_COUNTS : BAR_CHART_MARGIN_TOP_NO_COUNTS })); }, [showBarCounts]);
     var fill = function (entry, index) {
         return entry.x === 'missing' ? otherFill : chartFill[index % chartFill.length];
     };
@@ -45,7 +65,9 @@ var BaseBarChart = function (_a) {
     //  Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
     //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
     //    - David L, 2023-01-03
-    return (_jsxs(ChartWrapper, { responsive: typeof width !== 'number', children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: BAR_CHART_MARGINS, onClick: onChartClick, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, { content: _jsx(BarTooltip, { totalCount: totalCount }) }), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, maxBarSize: 70, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }));
+    return (_jsx(BarLabelContext.Provider, { value: { barCountFillMode: barCountFillMode !== null && barCountFillMode !== void 0 ? barCountFillMode : 'neutral' }, children: _jsxs(ChartWrapper, { responsive: typeof width !== 'number', children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: margins, onClick: onChartClick, barCategoryGap: 1.5, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, { content: _jsx(BarTooltip, { totalCount: totalCount }) }), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, 
+                                // maxBarSize={70}
+                                label: showBarCounts ? BarLabel : undefined, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }) }));
 };
 var BarTooltip = function (_a) {
     var _b, _c, _d;
@@ -58,5 +80,23 @@ var BarTooltip = function (_a) {
     var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
     return (_jsxs("div", { style: TOOLTIP_STYLE, children: [_jsx("p", { style: LABEL_STYLE, children: name }), _jsxs("p", { style: COUNT_STYLE, children: [value, " (", percentage, "%)"] })] }));
 };
+var BarLabelContext = createContext({ barCountFillMode: 'neutral' });
+/**
+ * Component for rendering bar counts directly above bars in the plot.
+ */
+var BarLabel = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, value = _a.value, fill = _a.fill;
+    var barCountFillMode = useContext(BarLabelContext).barCountFillMode;
+    // Funky conversion to placate TypeScript. In reality, width should always be a number here, the Recharts types are
+    // just incorrect or something.
+    // noinspection SuspiciousTypeOfGuard
+    var finalWidth = typeof width === 'string' ? MIN_BAR_WIDTH_FOR_COUNTS : (width !== null && width !== void 0 ? width : 0);
+    // Flip the labels to vertical text when the bar width is (roughly) less than the text width
+    // noinspection SuspiciousTypeOfGuard
+    var vertical = finalWidth < (value !== null && value !== void 0 ? value : '').toString().length * BAR_LABEL_APPROX_NUMBER_WIDTH;
+    // noinspection SuspiciousTypeOfGuard
+    var xPos = typeof x === 'number' ? x + finalWidth / 2 : x;
+    return (_jsx("g", { transform: "translate(".concat(xPos, ", ").concat(y, ")"), children: _jsx("text", { textAnchor: vertical ? 'start' : 'middle', dominantBaseline: vertical ? 'central' : undefined, transform: vertical ? 'rotate(-90)' : undefined, letterSpacing: vertical ? -1 : undefined, dy: vertical ? 0 : -1 * BAR_LABEL_SPACING, dx: vertical ? BAR_LABEL_SPACING : 0, fill: barCountFillMode === 'neutral' ? '#666666' : fill, children: finalWidth < MIN_BAR_WIDTH_FOR_COUNTS || value === 0 ? '' : value }) }));
+};
 export default BaseBarChart;
 //# sourceMappingURL=BaseBarChart.js.map

package/dist/Components/Charts/BaseBarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BaseBarChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseBarChart.js","sourceRoot":"","sources":["../../../src/Components/Charts/BaseBarChart.tsx"],"names":[],"mappings":"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"}

package/dist/Components/Charts/BentoHistogram.d.ts

@@ -1,3 +1,3 @@
 import { HistogramProps } from '../../types/chartTypes';
-declare const BentoHistogram: ({ colorTheme, ...params }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
+declare const BentoHistogram: ({ colorTheme, barCountFillMode, ...params }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
 export default BentoHistogram;

package/dist/Components/Charts/BentoHistogram.js

@@ -24,9 +24,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useChartTheme } from '../../ChartConfigProvider';
 import BaseBarChart from './BaseBarChart';
 var BentoHistogram = function (_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, params = __rest(_a, ["colorTheme"]);
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'default' : _b, barCountFillMode = _a.barCountFillMode, params = __rest(_a, ["colorTheme", "barCountFillMode"]);
     var _c = useChartTheme().histogram[colorTheme], chartFill = _c.fill, otherFill = _c.other;
-    return _jsx(BaseBarChart, __assign({ chartFill: chartFill, otherFill: otherFill }, params));
+    return (_jsx(BaseBarChart, __assign({ chartFill: chartFill, otherFill: otherFill, barCountFillMode: barCountFillMode !== null && barCountFillMode !== void 0 ? barCountFillMode : 'match' }, params)));
 };
 export default BentoHistogram;
 //# sourceMappingURL=BentoHistogram.js.map

package/dist/Components/Charts/BentoHistogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"BentoHistogram.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoHistogram.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,IAAM,cAAc,GAAG,UAAC,EAAqD;IAAnD,IAAA,kBAAsB,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAK,MAAM,cAAnC,cAAqC,CAAF;IACnD,IAAA,KAAwC,aAAa,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,EAArE,SAAS,UAAA,EAAS,SAAS,WAA0C,CAAC;IAEpF,OAAO,KAAC,YAAY,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,MAAM,EAAI,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BentoHistogram.js","sourceRoot":"","sources":["../../../src/Components/Charts/BentoHistogram.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,IAAM,cAAc,GAAG,UAAC,EAAuE;IAArE,IAAA,kBAAsB,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAE,gBAAgB,sBAAA,EAAK,MAAM,cAArD,kCAAuD,CAAF;IACrE,IAAA,KAAwC,aAAa,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,EAArE,SAAS,UAAA,EAAS,SAAS,WAA0C,CAAC;IAEpF,OAAO,CACL,KAAC,YAAY,aACX,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,OAAO,IACzC,MAAM,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/types/chartTypes.d.ts

@@ -62,6 +62,7 @@ export interface PieChartProps extends BaseCategoricalChartProps {
     chartThreshold?: number;
     maxLabelChars?: number;
 }
+export type BarCountFillMode = 'match' | 'neutral';
 export interface BaseBarChartProps extends BaseCategoricalChartProps {
     chartFill: HexColor[];
     otherFill: HexColor;
@@ -69,6 +70,8 @@ export interface BaseBarChartProps extends BaseCategoricalChartProps {
     units: string;
     onClick?: BarProps['onClick'];
     onChartClick?: RechartsBarChartProps['onClick'];
+    showBarCounts?: boolean;
+    barCountFillMode?: BarCountFillMode;
 }
 export interface BarChartProps extends Omit<BaseBarChartProps, 'chartFill' | 'otherFill'> {
     colorTheme?: keyof ChartTheme['bar'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bento-charts",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "Charts library for Bento-platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/Components/Charts/BaseBarChart.tsx

@@ -1,11 +1,12 @@
-import { useCallback } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
 import {
   Bar,
   BarChart,
-  BarProps,
+  type BarProps,
   CartesianGrid,
   Cell,
   Label,
+  type LabelProps,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -23,7 +24,7 @@ import {
   COUNT_KEY,
 } from '../../constants/chartConstants';
 
-import type { BaseBarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
+import { BarCountFillMode, BaseBarChartProps, CategoricalChartDataItem, TooltipPayload } from '../../types/chartTypes';
 import { useChartTranslation } from '../../ChartConfigProvider';
 import NoData from '../NoData';
 import { useTransformedChartData } from '../../util/chartUtils';
@@ -36,7 +37,12 @@ const tickFormatter = (tickLabel: string) => {
   return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
 };
 
-const BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+const BAR_CHART_MARGINS = { bottom: 100, right: 0 };
+const BAR_CHART_MARGIN_TOP_COUNTS = 35;
+const BAR_CHART_MARGIN_TOP_NO_COUNTS = 10;
+const MIN_BAR_WIDTH_FOR_COUNTS = 11;
+const BAR_LABEL_SPACING = 4; // Spacing of a BarLabel above the actual bar, in pixels.
+const BAR_LABEL_APPROX_NUMBER_WIDTH = 9.2;
 
 const BaseBarChart = ({
   height,
@@ -47,10 +53,23 @@ const BaseBarChart = ({
   onChartClick,
   chartFill,
   otherFill,
+  showBarCounts,
+  barCountFillMode,
   ...params
 }: BaseBarChartProps) => {
+  showBarCounts = showBarCounts ?? true; // Show bar counts by default
+
   const t = useChartTranslation();
 
+  const margins = useMemo(
+    () => ({
+      ...BAR_CHART_MARGINS,
+      // Top margin needs to accommodate bar count labels:
+      top: showBarCounts ? BAR_CHART_MARGIN_TOP_COUNTS : BAR_CHART_MARGIN_TOP_NO_COUNTS,
+    }),
+    [showBarCounts]
+  );
+
   const fill = (entry: CategoricalChartDataItem, index: number) =>
     entry.x === 'missing' ? otherFill : chartFill[index % chartFill.length];
 
@@ -76,35 +95,44 @@ const BaseBarChart = ({
   //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
   //    - David L, 2023-01-03
   return (
-    <ChartWrapper responsive={typeof width !== 'number'}>
-      <div style={TITLE_STYLE}>{title}</div>
-      <ResponsiveContainer width={width ?? '100%'} height={height}>
-        <BarChart data={data} margin={BAR_CHART_MARGINS} onClick={onChartClick}>
-          <XAxis
-            dataKey="x"
-            height={20}
-            angle={-45}
-            ticks={data.length ? undefined : ['']}
-            tickFormatter={tickFormatter}
-            tickMargin={TICK_MARGIN}
-            textAnchor="end"
-            interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
-          >
-            <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
-          </XAxis>
-          <YAxis>
-            <Label value={t[COUNT_KEY]} offset={-10} position="left" angle={270} />
-          </YAxis>
-          <CartesianGrid strokeDasharray="3 3" vertical={false} />
-          <Tooltip content={<BarTooltip totalCount={totalCount} />} />
-          <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover} maxBarSize={70}>
-            {data.map((entry, index) => (
-              <Cell key={entry.x} fill={fill(entry, index)} />
-            ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </ChartWrapper>
+    <BarLabelContext.Provider value={{ barCountFillMode: barCountFillMode ?? 'neutral' }}>
+      <ChartWrapper responsive={typeof width !== 'number'}>
+        <div style={TITLE_STYLE}>{title}</div>
+        <ResponsiveContainer width={width ?? '100%'} height={height}>
+          <BarChart data={data} margin={margins} onClick={onChartClick} barCategoryGap={1.5}>
+            <XAxis
+              dataKey="x"
+              height={20}
+              angle={-45}
+              ticks={data.length ? undefined : ['']}
+              tickFormatter={tickFormatter}
+              tickMargin={TICK_MARGIN}
+              textAnchor="end"
+              interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
+            >
+              <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
+            </XAxis>
+            <YAxis>
+              <Label value={t[COUNT_KEY]} offset={-10} position="left" angle={270} />
+            </YAxis>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <Tooltip content={<BarTooltip totalCount={totalCount} />} />
+            <Bar
+              dataKey="y"
+              isAnimationActive={false}
+              onClick={onClick}
+              onMouseEnter={onHover}
+              // maxBarSize={70}
+              label={showBarCounts ? BarLabel : undefined}
+            >
+              {data.map((entry, index) => (
+                <Cell key={entry.x} fill={fill(entry, index)} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </ChartWrapper>
+    </BarLabelContext.Provider>
   );
 };
 
@@ -135,4 +163,41 @@ const BarTooltip = ({
   );
 };
 
+const BarLabelContext = createContext<{ barCountFillMode: BarCountFillMode }>({ barCountFillMode: 'neutral' });
+
+/**
+ * Component for rendering bar counts directly above bars in the plot.
+ */
+const BarLabel = ({ x, y, width, value, fill }: LabelProps) => {
+  const { barCountFillMode } = useContext(BarLabelContext);
+
+  // Funky conversion to placate TypeScript. In reality, width should always be a number here, the Recharts types are
+  // just incorrect or something.
+  // noinspection SuspiciousTypeOfGuard
+  const finalWidth = typeof width === 'string' ? MIN_BAR_WIDTH_FOR_COUNTS : (width ?? 0);
+
+  // Flip the labels to vertical text when the bar width is (roughly) less than the text width
+  // noinspection SuspiciousTypeOfGuard
+  const vertical = finalWidth < (value ?? '').toString().length * BAR_LABEL_APPROX_NUMBER_WIDTH;
+  // noinspection SuspiciousTypeOfGuard
+  const xPos = typeof x === 'number' ? x + finalWidth / 2 : x;
+
+  return (
+    <g transform={`translate(${xPos}, ${y})`}>
+      <text
+        textAnchor={vertical ? 'start' : 'middle'} // Anchor the start coordinate of the text at the start in vert. mode
+        dominantBaseline={vertical ? 'central' : undefined} // In vertical text mode, center the text over the bar
+        transform={vertical ? 'rotate(-90)' : undefined} // Make text vertical for narrow bars
+        letterSpacing={vertical ? -1 : undefined} // Compress text slightly in vertical mode, to better fit in margin
+        dy={vertical ? 0 : -1 * BAR_LABEL_SPACING}
+        dx={vertical ? BAR_LABEL_SPACING : 0}
+        fill={barCountFillMode === 'neutral' ? '#666666' : fill}
+      >
+        {/* Hide 0-count values to avoid a bunch of "0" spam in histograms with empty bars */}
+        {finalWidth < MIN_BAR_WIDTH_FOR_COUNTS || value === 0 ? '' : value}
+      </text>
+    </g>
+  );
+};
+
 export default BaseBarChart;

package/src/Components/Charts/BentoHistogram.tsx

@@ -3,10 +3,17 @@ import { HistogramProps } from '../../types/chartTypes';
 import { useChartTheme } from '../../ChartConfigProvider';
 import BaseBarChart from './BaseBarChart';
 
-const BentoHistogram = ({ colorTheme = 'default', ...params }: HistogramProps) => {
+const BentoHistogram = ({ colorTheme = 'default', barCountFillMode, ...params }: HistogramProps) => {
   const { fill: chartFill, other: otherFill } = useChartTheme().histogram[colorTheme];
 
-  return <BaseBarChart chartFill={chartFill} otherFill={otherFill} {...params} />;
+  return (
+    <BaseBarChart
+      chartFill={chartFill}
+      otherFill={otherFill}
+      barCountFillMode={barCountFillMode ?? 'match'} // For histograms, bar count text fill defaults to matching bar
+      {...params}
+    />
+  );
 };
 
 export default BentoHistogram;

package/src/types/chartTypes.ts

@@ -79,6 +79,8 @@ export interface PieChartProps extends BaseCategoricalChartProps {
   maxLabelChars?: number;
 }
 
+export type BarCountFillMode = 'match' | 'neutral';
+
 export interface BaseBarChartProps extends BaseCategoricalChartProps {
   chartFill: HexColor[];
   otherFill: HexColor;
@@ -86,6 +88,8 @@ export interface BaseBarChartProps extends BaseCategoricalChartProps {
   units: string;
   onClick?: BarProps['onClick'];
   onChartClick?: RechartsBarChartProps['onClick'];
+  showBarCounts?: boolean;
+  barCountFillMode?: BarCountFillMode; // Whether the bar count text fill should match the bar color, or be neutral.
 }
 
 export interface BarChartProps extends Omit<BaseBarChartProps, 'chartFill' | 'otherFill'> {