diff --git a/src/components/Tokens/TokenDetails/PriceChart.tsx b/src/components/Tokens/TokenDetails/PriceChart.tsx index 44da4d2fab..6fb0b072a0 100644 --- a/src/components/Tokens/TokenDetails/PriceChart.tsx +++ b/src/components/Tokens/TokenDetails/PriceChart.tsx @@ -258,7 +258,24 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod } setDisplayPrice(endingPrice) }, [setCrosshair, setDisplayPrice, endingPrice]) + // Resets the crosshair when the time period is changed, to avoid stale UI + useEffect(() => { + setCrosshair(null) + }, [timePeriod]) + const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(timePeriod, locale) + //max ticks based on screen size + const maxTicks = Math.floor(width / 100) + function calculateTicks(ticks: NumberValue[]) { + const newTicks = [] + const tickSpacing = Math.floor(ticks.length / maxTicks) + for (let i = 1; i < ticks.length; i += tickSpacing) { + newTicks.push(ticks[i]) + } + return newTicks + } + + const updatedTicks = maxTicks > 0 ? (ticks.length > maxTicks ? calculateTicks(ticks) : ticks) : [] const delta = calculateDelta(startingPrice.value, displayPrice.value) const formattedDelta = formatDelta(delta) const arrow = getDeltaArrow(delta) @@ -327,7 +344,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod } tickLength={4} hideTicks={true} tickTransform="translate(0 -5)" - tickValues={ticks} + tickValues={updatedTicks} top={graphHeight - 1} tickLabelProps={() => ({ fill: theme.textSecondary,