diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx index 4b4010ac9..ef5014a1f 100644 --- a/src/components/visx/TimeSeriesChart.tsx +++ b/src/components/visx/TimeSeriesChart.tsx @@ -87,6 +87,7 @@ type StyleProps = { padding?: Margin; defaultZoomDomain?: number; minZoomDomain: number; + domainBasePadding?: [number, number]; numGridLines?: number; withGridRows?: boolean; withGridColumns?: boolean; @@ -123,6 +124,7 @@ export const TimeSeriesChart = ({ padding, defaultZoomDomain, minZoomDomain = 0, + domainBasePadding = [0, 0], numGridLines, withGridRows = true, withGridColumns = false, @@ -209,9 +211,13 @@ export const TimeSeriesChart = ({ const zoom = zoomDomain / minZoomDomain; - const domain = [ + const domainBase = [ clamp(xAccessor(latestDatum) - zoomDomain, xAccessor(earliestDatum), xAccessor(latestDatum)), xAccessor(latestDatum), + ] as [number, number]; + const domain = [ + domainBase[0] - (domainBase[1] - domainBase[0]) * domainBasePadding[0], + domainBase[1] + (domainBase[1] - domainBase[0]) * domainBasePadding[1], ] as const; const visibleData = data.filter( diff --git a/src/pages/vaults/VaultPnlChart.tsx b/src/pages/vaults/VaultPnlChart.tsx index ef1f23343..e32fe158b 100644 --- a/src/pages/vaults/VaultPnlChart.tsx +++ b/src/pages/vaults/VaultPnlChart.tsx @@ -249,6 +249,7 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => { onTooltipContext={onTooltipContext} onZoom={handleZoom} defaultZoomDomain={zoomDomain} + domainBasePadding={[0.01, 0]} minZoomDomain={timeUnits.day * 2.5} slotEmpty={undefined} numGridLines={0}