I'm displaying some data with an AreaChart from recharts, but I'm trying to make it more dynamic by including a timeframe for the data. It should have a button group of different time frames(ex. 1day, 1week, 1 month..) and when one button is clicked the chart should be updated.

I've been trying to do it with React Hooks but it makes the chart glitch between previous state and updated one so I ended up removing it.

This is the function that fetches data, having a variable in the API.

    const [loading, setLoading] = useState(false)
    const [data, setData] = useState({})
    const [time_format, setTimeFormat] = useState("14")

    async function fetchChart(time_format) {
        try {
            const response = await axios.get(
                `https://api.coingecko.com/api/v3/coins/moon/market_chart?vs_currency=usd&days=${time_format}&interval=hourly`
            );

            const mapped = response.data.prices.map(([timestamp, price]) => ({
                date: moment(new Date(timestamp)).format("YYYY MM DD HH:MM"),
                value: price
            }));
            
            setData(mapped);
            setLoading(true);

        } catch(error) {
            console.log(error)
        }
    }

return(
        <div className="button-group d-flex justify-content-center pb-3">
            <button>1H</button>
            <button>1D</button>
            <button>1W</button>
            <button>1M</button>
            <button>3M</button>
            <button>6M</button>
            <button>1Y</button>
            <button>ALL</button>
        </div>

        // chart
)

I'm trying to make it work like the chart from here: https://www.coingecko.com/en/coins/bitcoin

A line chart with buttons for timeframe that recalls the API based on value