CLOUDP-363674: Ensure small values show minimum bar visibility in Bar charts

.changeset/dark-trams-fry.md

@@ -0,0 +1,6 @@
+---
+'@lg-charts/core': minor
+---
+
+Small values including zero will show at least a thin bar (1px line minimum) on Bar charts for
+visibility

charts/core/src/BarChart.stories.tsx

@@ -208,3 +208,66 @@ export const BarWithCategoryAxisLabel: StoryObj<{
     );
   },
 };
+
+export const BarWithMinimumHeight: StoryObj<{
+  barMinHeight: number;
+}> = {
+  args: {
+    barMinHeight: 1,
+  },
+  argTypes: {
+    barMinHeight: {
+      control: { type: 'number', min: 0, max: 10, step: 1 },
+      description: 'Minimum height of bars in pixels',
+    },
+  },
+  render: ({ barMinHeight }) => {
+    // Create data with extreme value differences to demonstrate the feature
+    const extremeValueData = [
+      {
+        name: 'Large Values',
+        data: [
+          [new Date('2024-01-01').getTime(), 1000000000],
+          [new Date('2024-01-02').getTime(), 950000000],
+          [new Date('2024-01-03').getTime(), 1100000000],
+          [new Date('2024-01-04').getTime(), 1050000000],
+        ] as Array<[number, number]>,
+      },
+      {
+        name: 'Small Values',
+        data: [
+          [new Date('2024-01-01').getTime(), 100],
+          [new Date('2024-01-02').getTime(), 50],
+          [new Date('2024-01-03').getTime(), 200],
+          [new Date('2024-01-04').getTime(), 0],
+        ] as Array<[number, number]>,
+      },
+      {
+        name: 'Medium Values',
+        data: [
+          [new Date('2024-01-01').getTime(), 500000],
+          [new Date('2024-01-02').getTime(), 450000],
+          [new Date('2024-01-03').getTime(), 550000],
+          [new Date('2024-01-04').getTime(), 10],
+        ] as Array<[number, number]>,
+      },
+    ];
+
+    return (
+      <Chart>
+        <XAxis
+          type="time"
+          formatter={value => {
+            const date = new Date(value);
+            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+          }}
+        />
+        <YAxis type="value" />
+        <ChartTooltip />
+        {extremeValueData.map(({ name, data }) => (
+          <Bar name={name} data={data} key={name} barMinHeight={barMinHeight} />
+        ))}
+      </Chart>
+    );
+  },
+};

charts/core/src/Series/Bar/Bar.tsx

@@ -37,28 +37,37 @@ export type BarProps = SeriesProps & {
    * - `none`: Other bars will not be affected by the hover. (default)
    */
   hoverBehavior?: BarHoverBehavior;
+
+  /**
+   * Minimum height of bar in pixels. Ensures small values (including zero) are still visible.
+   * Useful when charts have large differences in value magnitudes.
+   * @default 1
+   */
+  barMinHeight?: number;
 };
 
 export const Bar = ({
   name,
   data,
   stack,
   hoverBehavior = BarHoverBehavior.None,
+  barMinHeight = 1,
 }: BarProps) => {
   const options = useCallback<
     (stylingContext: StylingContext) => EChartSeriesOptions['bar']['options']
   >(
     stylingContext => ({
       clip: false,
       stack,
+      barMinHeight,
       emphasis: {
         focus: getEmphasisFocus(hoverBehavior),
       },
       itemStyle: {
         color: stylingContext.seriesColor,
       },
     }),
-    [stack, hoverBehavior],
+    [stack, hoverBehavior, barMinHeight],
   );
 
   return <Series type="bar" name={name} data={data} options={options} />;