Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx (TypeScript)

Code before:
          <ResponsivePie
            data={chartData}
            margin={showDataLabels && !hasNoData ? PIE_CHART_MARGINS : {}}
            innerRadius={0.8}
            padAngle={hasNoData ? 0 : 1}
            colors={chartColors}
            borderWidth={0}
            enableArcLinkLabels={showDataLabels && !hasNoData}
            enableArcLabels={false}
            tooltip={hasNoData ? () => null : renderTooltip}
            onClick={hasNoData ? undefined : handleSliceClick}
            onMouseEnter={
              hasNoData ? undefined : (datum) => setHoveredSliceId(datum.id)
            }
            onMouseLeave={hasNoData ? undefined : () => setHoveredSliceId(null)}
            layers={['arcs', 'arcLinkLabels']}
            arcLinkLabel={(datum: ComputedDatum<PieChartDataItem>) => {
              const tooltipData = createTooltipData(datum);
              return (
                tooltipData?.tooltipItem.formattedValue ||
                datum.data.value.toString()
              );
            }}
            arcLinkLabelsDiagonalLength={10}
            arcLinkLabelsStraightLength={10}
            arcLinkLabelsTextColor={theme.font.color.primary}
            arcLinkLabelsColor={theme.font.color.extraLight}
            theme={{
              labels: {
                text: {
                  fontSize: theme.font.size.sm,
                  fontWeight: theme.font.weight.medium,
                },
              },
            }}
          />
        </StyledPieChartWrapper>
      </GraphWidgetChartContainer>
      <GraphWidgetLegend
        show={showLegend && !hasNoData}
        items={enrichedData.map((item) => ({
          id: item.id,
          label: item.label || item.id,
          color: item.colorScheme.solid,
        }))}
      />
    </StyledContainer>
  );
};


Review comment (suggestion):
<img width="1629" height="910" alt="CleanShot 2025-11-26 at 22 11 19" src="https://github.com/user-attachments/assets/ce44c540-0cae-4d46-855f-19c2b56eb8bf" />

data labels font color be same for all?
line and bar have lighter color than pie

Code after:
          <ResponsivePie
            data={chartData}
            margin={showDataLabels && !hasNoData ? PIE_CHART_MARGINS : {}}
            innerRadius={0.8}
            padAngle={hasNoData ? 0 : 1}
            colors={chartColors}
            borderWidth={0}
            enableArcLinkLabels={showDataLabels && !hasNoData}
            enableArcLabels={false}
            tooltip={hasNoData ? () => null : renderTooltip}
            onClick={hasNoData ? undefined : handleSliceClick}
            onMouseEnter={
              hasNoData ? undefined : (datum) => setHoveredSliceId(datum.id)
            }
            onMouseLeave={hasNoData ? undefined : () => setHoveredSliceId(null)}
            layers={['arcs', 'arcLinkLabels']}
            arcLinkLabel={(datum: ComputedDatum<PieChartDataItem>) => {
              const tooltipData = createTooltipData(datum);
              return (
                tooltipData?.tooltipItem.formattedValue ||
                datum.data.value.toString()
              );
            }}
            arcLinkLabelsDiagonalLength={10}
            arcLinkLabelsStraightLength={10}
            arcLinkLabelsTextColor={theme.font.color.light}
            arcLinkLabelsColor={theme.font.color.extraLight}
            theme={{
              labels: {
                text: {
                  fontSize: theme.font.size.sm,
                  fontWeight: theme.font.weight.medium,
                },
              },
            }}
          />
        </StyledPieChartWrapper>
      </GraphWidgetChartContainer>
      <GraphWidgetLegend
        show={showLegend && !hasNoData}
        items={enrichedData.map((item) => ({
          id: item.id,
          label: item.label || item.id,
          color: item.colorScheme.solid,
        }))}
      />
    </StyledContainer>
  );
};