RechartsのBrushのラベルを余白に応じて内側/外側に自動切り替えするようにしてみた

const BRUSH_HEIGHT = 30     // Brushコンポーネントのheight
const TRAVELLER_WIDTH = 5   // トラベラー幅
const LABEL_WIDTH = 55      // ラベル1つ分のおおよそのピクセル幅

const BrushLabels = ({
	data,
	startIndex,
	endIndex,
}: {
	data: { yearMonth: string }[]
	startIndex: number
	endIndex: number
}) => {
	const plotArea = usePlotArea()
	const chartHeight = useChartHeight()
	const margin = useMargin()

	if (!plotArea || !chartHeight || !margin) return null

	// 選択範囲をデータ件数で等分し、トラベラーの左端・右端のX座標を求める
	const pointWidth = data.length > 0 ? plotArea.width / data.length : 0
	const startX = plotArea.x + startIndex * pointWidth
	const endX = plotArea.x + (endIndex + 1) * pointWidth

	// BrushのY軸の中央座標
	const labelY = chartHeight - margin.bottom - BRUSH_HEIGHT / 2

	// 選択範囲の外側の余白を計算
	const startOuterSpace = startX - plotArea.x
	const endOuterSpace = plotArea.x + plotArea.width - endX

	// 余白が足りなければ内側に配置
	const startLabelInside = startOuterSpace <= LABEL_WIDTH
	const endLabelInside = endOuterSpace <= LABEL_WIDTH

	// 外側に余白があれば外側、なければ内側にラベルを配置
	const startLabelX = startLabelInside
		? startX + TRAVELLER_WIDTH + 3
		: startX - 3
	const startAnchor = startLabelInside ? 'start' : 'end'

	const endLabelX = endLabelInside
		? endX - TRAVELLER_WIDTH - 3
		: endX + TRAVELLER_WIDTH + 3
	const endAnchor = endLabelInside ? 'end' : 'start'

	return (
		<g pointerEvents="none">
			<text
				x={startLabelX}
				y={labelY}
				textAnchor={startAnchor}
				dominantBaseline="middle"
				fontSize={10}
				fill="#333"
			>
				{data[startIndex]?.yearMonth}
			</text>
			<text
				x={endLabelX}
				y={labelY}
				textAnchor={endAnchor}
				dominantBaseline="middle"
				fontSize={10}
				fill="#333"
			>
				{data[endIndex]?.yearMonth}
			</text>
		</g>
	)
}

const Chart = ({ data }: { data: { yearMonth: string; value: number }[] }) => {
	const [startIndex, setStartIndex] = useState(0)
	const [endIndex, setEndIndex] = useState(data.length - 1)

	return (
		{/* デフォルトのBrushラベルをCSSで非表示 */}
		<div className="[&_.recharts-brush-texts]:hidden">
			<ResponsiveContainer width="100%" height={400}>
				<BarChart data={data}>
					<XAxis dataKey="yearMonth" />
					<YAxis />
					<Bar dataKey="value" fill="#3B82F6" />
					<Brush
						dataKey="yearMonth"
						height={30}
						onChange={({ startIndex: si, endIndex: ei }) => {
							if (si != null && ei != null) {
								setStartIndex(si)
								setEndIndex(ei)
							}
						}}
					/>
					{/* カスタムラベルをBarChart内に直接配置 */}
					<BrushLabels
						data={data}
						startIndex={startIndex}
						endIndex={endIndex}
					/>
				</BarChart>
			</ResponsiveContainer>
		</div>
	)
}

.recharts-brush-texts {
  display: none;
}

<div class="[&_.recharts-brush-texts]:hidden">