remove values/formatted values from chart legends (#15490)

before:

<img width="639" height="385" alt="Screenshot 2025-10-31 at 15 29 01"
src="https://github.com/user-attachments/assets/5769a160-205d-4a03-ab7b-e037c65dd743"
/>


after:

<img width="667" height="371" alt="Screenshot 2025-10-31 at 15 27 51"
src="https://github.com/user-attachments/assets/12a4e034-6262-43a9-b257-894d74462d73"
/>

packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 export type GraphWidgetLegendItem = {
   id: string;
   label: string;
-  formattedValue: string;
   color: string;
 };
 
@@ -17,7 +16,6 @@ const StyledLegendContainer = styled.div`
   flex-wrap: wrap;
   gap: ${({ theme }) => theme.spacing(3)};
   justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} 0;
 `;
 
 const StyledLegendItem = styled.div`
@@ -32,10 +30,6 @@ const StyledLegendLabel = styled.span`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
-const StyledLegendValue = styled.span`
-  color: ${({ theme }) => theme.font.color.primary};
-`;
-
 const StyledDot = styled.div<{ color: string }>`
   background: ${({ color }) => color};
   border-radius: 50%;
@@ -58,7 +52,6 @@ export const GraphWidgetLegend = ({
         <StyledLegendItem key={item.id}>
           <StyledDot color={item.color} />
           <StyledLegendLabel>{item.label}</StyledLegendLabel>
-          <StyledLegendValue>{item.formattedValue}</StyledLegendValue>
         </StyledLegendItem>
       ))}
     </StyledLegendContainer>

packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLegend.stories.tsx

@@ -24,19 +24,16 @@ export const Default: Story = {
           {
             id: 'sales',
             label: 'Sales',
-            formattedValue: '$45,231',
             color: 'blue',
           },
           {
             id: 'marketing',
             label: 'Marketing',
-            formattedValue: '$12,543',
             color: 'green',
           },
           {
             id: 'operations',
             label: 'Operations',
-            formattedValue: '$8,765',
             color: 'red',
           },
         ]}
@@ -54,7 +51,6 @@ export const SingleItem: Story = {
           {
             id: 'revenue',
             label: 'Revenue',
-            formattedValue: '750',
             color: 'blue',
           },
         ]}

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx

@@ -277,14 +277,9 @@ export const GraphWidgetBarChart = ({
       <GraphWidgetLegend
         show={shouldShowLegend}
         items={enrichedKeys.map((item) => {
-          const total = data.reduce(
-            (sum, d) => sum + Number(d[item.key] || 0),
-            0,
-          );
           return {
             id: item.key,
             label: item.label,
-            formattedValue: formatGraphValue(total, formatOptions),
             color: item.colorScheme.solid,
           };
         })}

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx

@@ -169,7 +169,6 @@ export const GraphWidgetGaugeChart = ({
           {
             id: 'gauge',
             label: data.label || t`Value`,
-            formattedValue: formattedValue,
             color: colorScheme.solid,
           },
         ]}

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx

@@ -117,7 +117,6 @@ export const GraphWidgetLineChart = ({
     instanceId,
     enableArea,
     theme,
-    formatOptions,
   });
 
   const { createSliceTooltipData, createPointTooltipData } =

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts

@@ -1,6 +1,5 @@
 import { type LineChartSeries } from '@/page-layout/widgets/graph/graphWidgetLineChart/types/LineChartSeries';
 import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry';
-import { type GraphValueFormatOptions } from '@/page-layout/widgets/graph/utils/graphFormatters';
 import { renderHook } from '@testing-library/react';
 import { type ThemeType } from 'twenty-ui/theme';
 import { useLineChartData } from '../useLineChartData';
@@ -54,7 +53,6 @@ describe('useLineChartData', () => {
   };
 
   const mockTheme = { name: 'light' } as ThemeType;
-  const mockFormatOptions: GraphValueFormatOptions = { displayType: 'number' };
 
   const mockData: LineChartSeries[] = [
     {
@@ -87,7 +85,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -104,7 +101,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -130,7 +126,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: true,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -147,7 +142,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: true,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -164,7 +158,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -202,7 +195,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -225,7 +217,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -250,7 +241,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: darkTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -274,7 +264,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -299,7 +288,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -307,13 +295,11 @@ describe('useLineChartData', () => {
       {
         id: 'series1',
         label: 'Sales',
-        formattedValue: '370',
         color: expect.any(String),
       },
       {
         id: 'series2',
         label: 'Costs',
-        formattedValue: '270',
         color: expect.any(String),
       },
     ]);
@@ -338,7 +324,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -354,7 +339,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 
@@ -384,7 +368,6 @@ describe('useLineChartData', () => {
         instanceId: 'instance-1',
         enableArea: false,
         theme: mockTheme,
-        formatOptions: mockFormatOptions,
       }),
     );
 

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartData.ts

@@ -3,10 +3,6 @@ import { type LineChartSeries } from '@/page-layout/widgets/graph/graphWidgetLin
 import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry';
 import { createGradientDef } from '@/page-layout/widgets/graph/utils/createGradientDef';
 import { getColorScheme } from '@/page-layout/widgets/graph/utils/getColorScheme';
-import {
-  formatGraphValue,
-  type GraphValueFormatOptions,
-} from '@/page-layout/widgets/graph/utils/graphFormatters';
 import { type LineSeries } from '@nivo/line';
 import { useMemo } from 'react';
 import { isDefined } from 'twenty-shared/utils';
@@ -19,7 +15,6 @@ type UseLineChartDataProps = {
   instanceId: string;
   enableArea: boolean;
   theme: ThemeType;
-  formatOptions: GraphValueFormatOptions;
 };
 
 export const useLineChartData = ({
@@ -29,7 +24,6 @@ export const useLineChartData = ({
   instanceId,
   enableArea,
   theme,
-  formatOptions,
 }: UseLineChartDataProps) => {
   const dataMap = Object.fromEntries(data.map((series) => [series.id, series]));
   const enrichedSeries = useMemo((): LineChartEnrichedSeries[] => {
@@ -83,11 +77,9 @@ export const useLineChartData = ({
   const colors = enrichedSeries.map((series) => series.colorScheme.solid);
 
   const legendItems = enrichedSeries.map((series) => {
-    const total = series.data.reduce((sum, point) => sum + (point.y || 0), 0);
     return {
       id: series.id,
       label: series.label,
-      formattedValue: formatGraphValue(total, formatOptions),
       color: series.colorScheme.solid,
     };
   });

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx

@@ -7,10 +7,7 @@ import { usePieChartHandlers } from '@/page-layout/widgets/graph/graphWidgetPieC
 import { usePieChartTooltip } from '@/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip';
 import { type PieChartDataItem } from '@/page-layout/widgets/graph/graphWidgetPieChart/types/PieChartDataItem';
 import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
-import {
-  formatGraphValue,
-  type GraphValueFormatOptions,
-} from '@/page-layout/widgets/graph/utils/graphFormatters';
+import { type GraphValueFormatOptions } from '@/page-layout/widgets/graph/utils/graphFormatters';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
@@ -129,10 +126,6 @@ export const GraphWidgetPieChart = ({
         items={enrichedData.map((item) => ({
           id: item.id,
           label: item.label || item.id,
-          formattedValue: formatGraphValue(
-            displayType === 'percentage' ? item.percentage / 100 : item.value,
-            formatOptions,
-          ),
           color: item.colorScheme.solid,
         }))}
       />