@scality/core-ui 0.175.0 → 0.177.0

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -89,9 +89,9 @@ describe('Barchart', () => {
         </Wrapper>,
       );
 
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
+      expect(screen.getByText('06 Jul')).toBeInTheDocument();
+      expect(screen.getByText('07 Jul')).toBeInTheDocument();
     });
     it('should render the Barchart component with error state', async () => {
       const { Wrapper } = getWrapper();
@@ -153,11 +153,11 @@ describe('Barchart', () => {
           </ChartLegendWrapper>
         </Wrapper>,
       );
-      expect(screen.getByText('Wed03Jul')).toBeInTheDocument();
-      expect(screen.getByText('Thu04Jul')).toBeInTheDocument();
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+      expect(screen.getByText('03 Jul')).toBeInTheDocument();
+      expect(screen.getByText('04 Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
+      expect(screen.getByText('06 Jul')).toBeInTheDocument();
+      expect(screen.getByText('07 Jul')).toBeInTheDocument();
     });
     it('should render when there are missing data in the time range', async () => {
       const bars = [
@@ -203,10 +203,10 @@ describe('Barchart', () => {
 
       // Check that all days are present
       await waitFor(() => {
-        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
-        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
+        expect(screen.getByText('05 Jul')).toBeInTheDocument();
+        expect(screen.getByText('06 Jul')).toBeInTheDocument();
+        expect(screen.getByText('07 Jul')).toBeInTheDocument();
+        expect(screen.getByText('08 Jul')).toBeInTheDocument();
       });
     });
     it('should render for a specific time range', async () => {
@@ -244,13 +244,13 @@ describe('Barchart', () => {
         </Wrapper>,
       );
       await waitFor(() => {
-        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
-        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
-        expect(screen.getByText('Tue09Jul')).toBeInTheDocument();
-        expect(screen.getByText('Wed10Jul')).toBeInTheDocument();
-        expect(screen.getByText('Thu11Jul')).toBeInTheDocument();
+        expect(screen.getByText('05 Jul')).toBeInTheDocument();
+        expect(screen.getByText('06 Jul')).toBeInTheDocument();
+        expect(screen.getByText('07 Jul')).toBeInTheDocument();
+        expect(screen.getByText('08 Jul')).toBeInTheDocument();
+        expect(screen.getByText('09 Jul')).toBeInTheDocument();
+        expect(screen.getByText('10 Jul')).toBeInTheDocument();
+        expect(screen.getByText('11 Jul')).toBeInTheDocument();
       });
     });
     it('should render the Barchart component with hourly intervals', async () => {
@@ -411,7 +411,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('Fri05Jul 10:00')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
 
     it('should render the CustomTick component with day format', () => {
@@ -435,7 +435,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
     it('should render the CustomTick component with hour format', () => {
       const { Wrapper } = getWrapper();
@@ -458,7 +458,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('10:00')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
     it('should render the CustomTick component with minute format', () => {
       const { Wrapper } = getWrapper();
@@ -481,9 +481,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(
-        screen.getByText(new Date('2024-07-05T10:00:00').getTime()),
-      ).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -1,9 +1,8 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import {
   Bar,
   BarChart,
   CartesianGrid,
-  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   TooltipContentProps,
@@ -21,7 +20,7 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { BarchartTooltip } from './BarchartTooltip';
-import { UnitRange, useChartData } from './utils';
+import { getTicks, UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 4,
@@ -35,6 +34,7 @@ const CHART_CONSTANTS = {
     bottom: 0,
   },
 };
+const maxWidthTooltip = { maxWidth: '20rem' };
 
 /* ---------------------------------- TYPE ---------------------------------- */
 
@@ -77,6 +77,7 @@ export type BarchartSortFn<T extends BarchartBars> = (
 
 export type BarchartProps<T extends BarchartBars> = {
   type: CategoryType | TimeType;
+  title: string;
   bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
@@ -90,7 +91,6 @@ export type BarchartProps<T extends BarchartBars> = {
    * @default 'default'
    */
   stackedBarSort?: 'default' | 'legend';
-  title?: string;
   secondaryTitle?: string;
   rightTitle?: React.ReactNode;
   height?: number;
@@ -112,33 +112,19 @@ interface CustomTickProps {
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 
 /**
- * Formats a date based on the interval
- * @param timestamp - Timestamp
- * @param interval - Interval in milliseconds
+ * Get the format of the date based on the duration
+ * @param duration - Duration in milliseconds
  * @returns Formatted string
  */
 export const formatDate = (
-  timestamp: number,
-  interval: number,
-): React.ReactNode => {
-  const date = new Date(timestamp);
-  // More than 24 hours interval - use day and time format
-  if (interval > 24 * 60 * 60 * 1000) {
-    return (
-      <>
-        <FormattedDateTime format="chart-date" value={date} />{' '}
-        <FormattedDateTime format="time" value={date} />
-      </>
-    );
-  } else if (interval === 24 * 60 * 60 * 1000) {
-    // Daily interval - use day format
-    return <FormattedDateTime format="chart-date" value={date} />;
-  } else if (interval >= 60 * 1000) {
-    //Hourly and minute intervals - use minute format
-    return <FormattedDateTime format="time" value={date} />;
+  duration: number,
+): 'time' | 'day-month-abbreviated' | 'chart-long-term-date' => {
+  if (duration <= 24 * 60 * 60 * 1000) {
+    return 'time';
+  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+    return 'day-month-abbreviated';
   } else {
-    // minute interval or less - use full timestamp
-    return timestamp;
+    return 'chart-long-term-date';
   }
 };
 
@@ -155,6 +141,11 @@ export const CustomTick = ({
     width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
   const centerX = x - tickWidth / 2;
 
+  const duration =
+    type.type === 'time'
+      ? type.timeRange.endDate.getTime() - type.timeRange.startDate.getTime()
+      : 0;
+
   return (
     <foreignObject
       x={centerX}
@@ -167,9 +158,14 @@ export const CustomTick = ({
         color="textSecondary"
         text={
           <Text variant="Smaller">
-            {type.type === 'time'
-              ? formatDate(payload.value, type.timeRange.interval)
-              : String(payload.value)}
+            {type.type === 'time' ? (
+              <FormattedDateTime
+                format={formatDate(duration)}
+                value={new Date(payload.value)}
+              />
+            ) : (
+              String(payload.value)
+            )}
           </Text>
         }
         centered
@@ -188,6 +184,7 @@ export const CustomTick = ({
 export const StyledResponsiveContainer = styled(ResponsiveContainer)`
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
+    outline: none;
     overflow: visible;
   }
 `;
@@ -207,7 +204,12 @@ const ChartHeader = ({
     <Wrap>
       <Stack gap="r4">
         <Text variant="ChartTitle">{title}</Text>
-        {helpTooltip && <IconHelp tooltipMessage={helpTooltip} />}
+        {helpTooltip && (
+          <IconHelp
+            tooltipMessage={helpTooltip}
+            overlayStyle={maxWidthTooltip}
+          />
+        )}
 
         {secondaryTitle && (
           <Text
@@ -262,6 +264,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   const theme = useTheme();
   const { getColor } = useChartLegend();
   const [hoveredValue, setHoveredValue] = useState<string | undefined>();
+  const chartRef = useRef<HTMLDivElement>(null);
 
   const {
     height = CHART_CONSTANTS.DEFAULT_HEIGHT,
@@ -302,11 +305,11 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
       unitRange,
       stackedBarSort,
     );
-
+  const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
   return (
-    <Stack direction="vertical">
+    <Stack direction="vertical" style={{ gap: '0' }}>
       <ChartHeader
-        title={title}
+        title={titleWithUnit}
         secondaryTitle={secondaryTitle}
         helpTooltip={helpTooltip}
         rightTitle={rightTitle}
@@ -316,7 +319,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
       ) : isLoading ? (
         <Loading height={height} />
       ) : (
-        <StyledResponsiveContainer width="100%" height={height}>
+        <StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
           <BarChart
             data={rechartsData}
             accessibilityLayer
@@ -357,13 +360,11 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             })}
 
             <YAxis
-              tickCount={1}
               interval={0}
-              unit={` ${unitLabel}`}
               domain={[0, roundReferenceValue]}
+              ticks={getTicks(roundReferenceValue, false)}
               tickFormatter={
-                (value) =>
-                  new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
+                (value) => new Intl.NumberFormat('fr-FR').format(value) // Add a space as thousand separator
               }
               axisLine={{ stroke: theme.border }}
               tick={{
@@ -396,6 +397,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   hoveredValue={hoveredValue}
                   tooltip={tooltip}
                   unitLabel={unitLabel}
+                  chartContainerRef={chartRef}
                 />
               )}
               cursor={false}

package/src/lib/components/barchartv2/BarchartTooltip.test.tsx

@@ -19,6 +19,30 @@ const testTooltipProps = {
 const testTooltip = () => <div>Test Tooltip</div>;
 const date = new Date('2024-07-01T00:00:00').getTime();
 
+// Create a mock DOM element for the chart container
+const mockChartContainer = document.createElement('div');
+mockChartContainer.getBoundingClientRect = jest.fn(() => ({
+  width: 800,
+  height: 400,
+  top: 0,
+  left: 0,
+  right: 800,
+  bottom: 400,
+  x: 0,
+  y: 0,
+  toJSON: () => ({
+    width: 800,
+    height: 400,
+    top: 0,
+    left: 0,
+    right: 800,
+    bottom: 400,
+    x: 0,
+    y: 0,
+  }),
+}));
+const mockChartContainerRef = { current: mockChartContainer };
+
 describe('ChartTooltip', () => {
   const selectors = {
     tooltip: () => screen.queryByText(/Test Tooltip/),
@@ -30,6 +54,7 @@ describe('ChartTooltip', () => {
     longDate: () => screen.queryByText(/01 July 2024/),
     date: () => screen.queryByText(/\b01 Jul\b/),
     time: () => screen.queryByText(/00:00:00/),
+    dateTime: () => screen.queryByText(/01 Jul 00:00:00/),
   };
   it('should render the BarchartTooltip component', () => {
     render(
@@ -38,6 +63,7 @@ describe('ChartTooltip', () => {
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
         tooltip={undefined}
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.category()).toBeInTheDocument();
@@ -53,6 +79,7 @@ describe('ChartTooltip', () => {
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
         tooltip={testTooltip}
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.tooltip()).toBeInTheDocument();
@@ -64,6 +91,7 @@ describe('ChartTooltip', () => {
         tooltipProps={{ ...testTooltipProps, active: false }}
         hoveredValue="Success"
         tooltip={testTooltip}
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.tooltip()).not.toBeInTheDocument();
@@ -83,15 +111,15 @@ describe('ChartTooltip', () => {
         }}
         tooltipProps={{ ...testTooltipProps, label }}
         hoveredValue="Success"
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.success()).toBeInTheDocument();
     expect(selectors.successValue()).toBeInTheDocument();
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
-    expect(selectors.date()).not.toBeInTheDocument();
-    expect(selectors.longDate()).toBeInTheDocument();
-    expect(selectors.time()).not.toBeInTheDocument();
+
+    expect(selectors.dateTime()).toBeInTheDocument();
   });
   it('should render time tooltip when type is time and interval is one hour', () => {
     const label = date;
@@ -107,6 +135,7 @@ describe('ChartTooltip', () => {
         }}
         tooltipProps={{ ...testTooltipProps, label }}
         hoveredValue="Success"
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.success()).toBeInTheDocument();
@@ -133,6 +162,7 @@ describe('ChartTooltip', () => {
         tooltipProps={tooltipProps}
         hoveredValue="Success"
         unitLabel="kB"
+        chartContainerRef={mockChartContainerRef}
       />,
     );
 

package/src/lib/components/barchartv2/BarchartTooltip.tsx

@@ -1,19 +1,19 @@
+import { TooltipContentProps } from 'recharts';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import {
+  ChartTooltipPortal,
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  ChartTooltipItemsContainer,
+  TooltipHeader,
+} from '../charttooltip/ChartTooltip';
 import {
   BarchartBars,
   BarchartTooltipFn,
   CategoryType,
   TimeType,
 } from './Barchart.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { TooltipContentProps } from 'recharts';
 import { getCurrentPoint } from './utils';
-import {
-  ChartTooltipContainer,
-  ChartTooltipItem,
-  ChartTooltipHeader,
-  ChartTooltipItemsContainer,
-} from '../charttooltip/ChartTooltip';
-import { LegendShape } from '../chartlegend/ChartLegend';
 
 export const BarchartTooltip = <T extends BarchartBars>({
   type,
@@ -22,6 +22,7 @@ export const BarchartTooltip = <T extends BarchartBars>({
   hoveredValue,
   tooltip,
   unitLabel,
+  chartContainerRef,
 }: {
   type: TimeType | CategoryType;
   tooltipProps: TooltipContentProps<number, string>;
@@ -29,30 +30,28 @@ export const BarchartTooltip = <T extends BarchartBars>({
   hoveredValue: string | undefined;
   tooltip?: BarchartTooltipFn<T>;
   unitLabel?: string;
+  chartContainerRef: React.RefObject<HTMLDivElement>;
 }) => {
-  const { active } = tooltipProps;
+  const { active, coordinate } = tooltipProps;
 
   if (!active) {
     return null;
   }
 
   const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
-  if (tooltip) {
-    return tooltip(currentPoint);
-  }
 
-  return (
-    <ChartTooltipContainer>
+  const duration =
+    type.type === 'time'
+      ? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
+      : 0;
+
+  const tooltipContent = tooltip ? (
+    tooltip(currentPoint)
+  ) : (
+    <>
       <ChartTooltipHeader>
         {type.type === 'time' ? (
-          <FormattedDateTime
-            format={
-              type.timeRange.interval < 24 * 60 * 60 * 1000
-                ? 'day-month-abbreviated-hour-minute-second'
-                : 'long-date-without-weekday'
-            }
-            value={new Date(currentPoint.category)}
-          />
+          <TooltipHeader duration={duration} value={currentPoint.category} />
         ) : (
           currentPoint.category
         )}
@@ -84,6 +83,16 @@ export const BarchartTooltip = <T extends BarchartBars>({
           );
         })}
       </ChartTooltipItemsContainer>
-    </ChartTooltipContainer>
+    </>
+  );
+
+  return (
+    <ChartTooltipPortal
+      coordinate={coordinate}
+      chartContainerRef={chartContainerRef}
+      isVisible={active}
+    >
+      {tooltipContent}
+    </ChartTooltipPortal>
   );
 };

package/src/lib/components/barchartv2/utils.test.ts

@@ -7,6 +7,7 @@ import {
   getCurrentPoint,
   getMaxBarValue,
   getRoundReferenceValue,
+  getTicks,
   sortStackedBars,
   transformCategoryData,
   transformTimeData,
@@ -504,21 +505,73 @@ describe('applySortingToData', () => {
 });
 
 describe('getRoundReferenceValue', () => {
-  it('should return appropriate rounded values', () => {
-    expect(getRoundReferenceValue(1)).toBe(5);
-    expect(getRoundReferenceValue(2)).toBe(5);
-    expect(getRoundReferenceValue(3)).toBe(5);
-    expect(getRoundReferenceValue(7)).toBe(10);
-    expect(getRoundReferenceValue(15)).toBe(25);
-    expect(getRoundReferenceValue(35)).toBe(50);
-    expect(getRoundReferenceValue(75)).toBe(100);
-    expect(getRoundReferenceValue(150)).toBe(250);
-    expect(getRoundReferenceValue(350)).toBe(500);
-    expect(getRoundReferenceValue(750)).toBe(1000);
-    expect(getRoundReferenceValue(1500)).toBe(2500);
-    expect(getRoundReferenceValue(3500)).toBe(5000);
-    expect(getRoundReferenceValue(7500)).toBe(10000);
-    expect(getRoundReferenceValue(15000)).toBe(25000);
+  it('should return appropriate rounded values with 10% buffer', () => {
+    // Small values (< 10)
+    expect(getRoundReferenceValue(0.1)).toBe(0.2); // 0.1 → 0.11 → 0.2
+    expect(getRoundReferenceValue(1)).toBe(2); // 1.1 → 1.5 → 2
+    expect(getRoundReferenceValue(2)).toBe(5); // 2.2 → 3 → 5
+    expect(getRoundReferenceValue(3)).toBe(5); // 3.3 → 4 → 5
+
+    // Values 5-10 range
+    expect(getRoundReferenceValue(6)).toBe(10); // 6.6 → 10 (skip 7.5 for values < 10)
+    expect(getRoundReferenceValue(9)).toBe(10); // 9.9 → 10
+
+    // Larger values get 10% buffer applied
+    expect(getRoundReferenceValue(15)).toBe(20); // 16.5 → 20
+    expect(getRoundReferenceValue(35)).toBe(40); // 38.5 → 40
+    expect(getRoundReferenceValue(75)).toBe(100); // 82.5 → 100
+    expect(getRoundReferenceValue(150)).toBe(200); // 165 → 200
+    expect(getRoundReferenceValue(350)).toBe(400); // 385 → 400
+    expect(getRoundReferenceValue(750)).toBe(1000); // 825 → 1000
+    expect(getRoundReferenceValue(1500)).toBe(2000); // 1650 → 2000
+    expect(getRoundReferenceValue(3500)).toBe(4000); // 3850 → 4000
+    expect(getRoundReferenceValue(7500)).toBe(10000); // 8250 → 10000
+    expect(getRoundReferenceValue(15000)).toBe(20000); // 16500 → 20000
+  });
+});
+
+describe('getTicks', () => {
+  describe('small values (< 10)', () => {
+    it('should return 2 ticks for non-symmetrical small values', () => {
+      expect(getTicks(1, false)).toEqual([0, 1]);
+      expect(getTicks(2, false)).toEqual([0, 2]);
+      expect(getTicks(5, false)).toEqual([0, 5]);
+    });
+
+    it('should return 3 ticks for symmetrical small values', () => {
+      expect(getTicks(1, true)).toEqual([-1, 0, 1]);
+      expect(getTicks(2, true)).toEqual([-2, 0, 2]);
+      expect(getTicks(5, true)).toEqual([-5, 0, 5]);
+    });
+  });
+
+  describe('even topValue (divisible by 2)', () => {
+    it('should return 3 ticks for non-symmetrical even values', () => {
+      expect(getTicks(10, false)).toEqual([0, 5, 10]);
+      expect(getTicks(20, false)).toEqual([0, 10, 20]);
+      expect(getTicks(40, false)).toEqual([0, 20, 40]);
+      expect(getTicks(50, false)).toEqual([0, 25, 50]);
+      expect(getTicks(100, false)).toEqual([0, 50, 100]);
+      expect(getTicks(1000, false)).toEqual([0, 500, 1000]);
+    });
+
+    it('should return 5 ticks for symmetrical even values', () => {
+      expect(getTicks(10, true)).toEqual([-10, -5, 0, 5, 10]);
+      expect(getTicks(100, true)).toEqual([-100, -50, 0, 50, 100]);
+    });
+  });
+
+  describe('odd topValue (not divisible by 2) - 7.5 multiples', () => {
+    it('should return 4 ticks for non-symmetrical values from 7.5 × magnitude', () => {
+      expect(getTicks(75, false)).toEqual([0, 25, 50, 75]);
+      expect(getTicks(750, false)).toEqual([0, 250, 500, 750]);
+      expect(getTicks(7500, false)).toEqual([0, 2500, 5000, 7500]);
+    });
+
+    it('should return 7 ticks for symmetrical values from 7.5 × magnitude', () => {
+      expect(getTicks(75, true)).toEqual([-75, -50, -25, 0, 25, 50, 75]);
+      expect(getTicks(750, true)).toEqual([-750, -500, -250, 0, 250, 500, 750]);
+    });
   });
 });
 
@@ -685,7 +738,8 @@ describe('computeUnitLabelAndRoundReferenceValue', () => {
     );
 
     expect(result.unitLabel).toBe('kB');
-    expect(result.roundReferenceValue).toBe(10);
+    // 1680 / 1000 = 1.68, with buffer: 1.848 → rounds to 2
+    expect(result.roundReferenceValue).toBe(2);
     expect(result.rechartsData).toEqual([
       {
         category: 'category1',
@@ -718,7 +772,8 @@ describe('computeUnitLabelAndRoundReferenceValue', () => {
     );
 
     expect(result.unitLabel).toBe('B');
-    expect(result.roundReferenceValue).toBe(1000);
+    // 680 with buffer: 748 → rounds to 750 (7.5 * 100, value > 10)
+    expect(result.roundReferenceValue).toBe(750);
     expect(result.rechartsData).toEqual([
       { category: 'category1', success: 680 },
     ]);

package/src/lib/components/barchartv2/utils.ts

@@ -1,30 +1,58 @@
-import {
-  BarchartProps,
-  BarchartBars,
-  BarchartTooltipFn,
-} from './Barchart.component';
+import { BarchartProps, BarchartBars } from './Barchart.component';
 import { TooltipContentProps } from 'recharts';
 import { chartColors, ChartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 export const getRoundReferenceValue = (value: number): number => {
-  if (value <= 0) return 10; // Default for zero or negative values
+  if (value <= 0) return 1; // Default for zero or negative values
 
   // Get the magnitude (10^n where n is the number of digits - 1)
   const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
 
+  // Buffer the value by 10% to avoid being too close to the edge of the chart
+  const bufferedValue = value * 1.1;
+
   // Normalized value between 1 and 10
-  const normalized = value / magnitude;
+  const normalized = bufferedValue / magnitude;
 
   // Round to nice numbers based on normalized value
+  // skip 1.5, 3, 4, 7.5 as top value for better chart
+  // appearance for small values
   let result: number;
+
   if (normalized <= 1) result = magnitude;
-  else if (normalized <= 2.5) result = 2.5 * magnitude;
+  else if (normalized <= 2) result = 2 * magnitude;
+  else if (value > 10 && normalized <= 4) result = 4 * magnitude;
   else if (normalized <= 5) result = 5 * magnitude;
+  else if (value > 10 && normalized <= 7.5) result = 7.5 * magnitude;
   else result = 10 * magnitude;
 
-  // Ensure minimum value of 5 for better chart appearance
-  return Math.max(result, 5);
+  return result;
+};
+
+export const getTicks = (topValue: number, isSymmetrical: boolean) => {
+  if (topValue < 10) {
+    if (isSymmetrical) {
+      return [-topValue, 0, topValue];
+    } else {
+      return [0, topValue];
+    }
+  }
+  const numberOfTicks = topValue % 3 === 0 ? 4 : 3;
+  const tickInterval = topValue / (numberOfTicks - 1);
+  const ticks = Array.from(
+    { length: numberOfTicks },
+    (_, index) => index * tickInterval,
+  );
+  if (isSymmetrical) {
+    // Create negative ticks in order without 0
+    const negativeTicks = Array.from(
+      { length: numberOfTicks - 1 },
+      (_, index) => -(numberOfTicks - 1 - index) * tickInterval,
+    );
+    ticks.unshift(...negativeTicks);
+  }
+  return ticks;
 };
 
 export const getMaxBarValue = (
@@ -304,11 +332,11 @@ export const computeUnitLabelAndRoundReferenceValue = (
 ) => {
   if (!unitRange) {
     const roundReferenceValue = getRoundReferenceValue(maxValue);
-    return { unitLabel: '', roundReferenceValue, rechartsData: data };
+    return { unitLabel: undefined, roundReferenceValue, rechartsData: data };
   }
 
   const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
-  const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+  const topValue = maxValue / valueBase;
   const roundReferenceValue = getRoundReferenceValue(topValue);
   const rechartsData = data.map((dataPoint) => {
     const normalizedDataPoint = { ...dataPoint };