vynte-infra/twenty
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Bar chart: Prevent left tick labels to overlap on label (#15499)

Browse Source 
Prevent left tick labels to overlap on label by truncating the tick
label
This commit is contained in:
Raphaël Bosi
2025-10-31 22:50:22 +05:30
committed by GitHub
parent cd4a151a21
commit bb471cb8a5
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins.ts
+1 -1
View File
@@ -2,5 +2,5 @@ export const BAR_CHART_MARGINS = {
top: 20,
right: 20,
bottom: 60,
left: 70,
left: 80,
} as const;
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts
+17 -10
View File
@@ -10,7 +10,10 @@ import {
const AVERAGE_CHARACTER_WIDTH_RATIO = 0.6;
const MIN_TICK_LABEL_LENGTH = 5;
const MAX_LEFT_AXIS_LABEL_LENGTH = 20;
const MAX_LEFT_AXIS_LABEL_LENGTH = 10;
const LEFT_AXIS_LEGEND_OFFSET_PADDING = 5;
const TICK_PADDING = 5;
const BOTTOM_AXIS_LEGEND_OFFSET = 40;
type GetBarChartAxisConfigsProps = {
width: number;
@@ -64,24 +67,28 @@ export const getBarChartAxisConfigs = ({
return {
axisBottom: {
tickSize: 0,
tickPadding: 5,
tickPadding: TICK_PADDING,
tickRotation: 0,
tickValues: categoryTickValues,
legend: xAxisLabel,
legendPosition: 'middle' as const,
legendOffset: 40,
legendOffset: BOTTOM_AXIS_LEGEND_OFFSET,
format: (value: string | number) =>
truncateTickLabel(String(value), maxLabelLength),
},
axisLeft: {
tickSize: 0,
tickPadding: 5,
tickPadding: TICK_PADDING,
tickRotation: 0,
tickValues: numberOfValueTicks,
legend: yAxisLabel,
legendPosition: 'middle' as const,
legendOffset: -50,
format: (value: number) => formatGraphValue(value, formatOptions || {}),
legendOffset: -BAR_CHART_MARGINS.left + LEFT_AXIS_LEGEND_OFFSET_PADDING,
format: (value: number) =>
truncateTickLabel(
formatGraphValue(value, formatOptions ?? {}),
MAX_LEFT_AXIS_LABEL_LENGTH,
),
},
};
}
@@ -89,22 +96,22 @@ export const getBarChartAxisConfigs = ({
return {
axisBottom: {
tickSize: 0,
tickPadding: 5,
tickPadding: TICK_PADDING,
tickRotation: 0,
tickValues: numberOfValueTicks,
legend: yAxisLabel,
legendPosition: 'middle' as const,
legendOffset: 40,
legendOffset: BOTTOM_AXIS_LEGEND_OFFSET,
format: (value: number) => formatGraphValue(value, formatOptions || {}),
},
axisLeft: {
tickSize: 0,
tickPadding: 5,
tickPadding: TICK_PADDING,
tickRotation: 0,
tickValues: categoryTickValues,
legend: xAxisLabel,
legendPosition: 'middle' as const,
legendOffset: -50,
legendOffset: -BAR_CHART_MARGINS.left + LEFT_AXIS_LEGEND_OFFSET_PADDING,
format: (value: string | number) =>
truncateTickLabel(String(value), MAX_LEFT_AXIS_LABEL_LENGTH),
},