Chart data disappearing when I resize the window? (using chart.js)

Here's my component that gets the data I use to populate the chart:

import React, { useState, useEffect } from 'react'; import SearchBar from '../Searchbar/Searchbar'; import coinGecko from '../../apis/coinGecko'; import CurrentChart from '../CurrentChart/CurrentChart'; const ChartBuilder = () => { const [currentCoin, setCurrentCoin] = useState('bitcoin'); const [searchInput, setSearchInput] = useState(); const [coinData, setCoinData] = useState({}); const [timePeriod, setTimePeriod] = useState(1); const formatData = data => { return data.map(el => { return { t: el[0], y: el[1].toFixed(2) }; }); }; const fetchData = async () => { const [day, week, year, detail] = await Promise.all([ coinGecko.get(`/coins/${currentCoin}/market_chart/`, { params: { vs_currency: 'usd', days: '1' } }), coinGecko.get(`/coins/${currentCoin}/market_chart/`, { params: { vs_currency: 'usd', days: '7' } }), coinGecko.get(`/coins/${currentCoin}/market_chart/`, { params: { vs_currency: 'usd', days: '365' } }), coinGecko.get('/coins/markets/', { params: { vs_currency: 'usd', ids: currentCoin } }) ]); setCoinData({ day: formatData(day.data.prices), week: formatData(week.data.prices), year: formatData(year.data.prices), detail: detail.data[0] }); }; useEffect(() => { fetchData(); }, [currentCoin]); const searchButtonHandler = () => { setCurrentCoin(searchInput); }; const searchInputHandler = event => { setSearchInput(event.target.value); }; console.log(coinData); return ( <div> <SearchBar searchInputHandler={searchInputHandler} searchButtonHandler={searchButtonHandler} /> <CurrentChart coinData={coinData} /> </div> ); }; export default ChartBuilder; 

here are the options:

export const historyOptions = { lineHeightAnnotation: { always: true, hover: false, lineWeight: 1.5 }, animation: { duration: 2000 }, maintainAspectRatio: false, responsive: true, scales: { xAxes: [ { type: 'time', distribution: 'linear' } ] } }; 

and here's the actual chart:

import React, { useRef, useEffect } from 'react'; import Chartjs from 'chart.js'; import { historyOptions } from '../chartConfigs/chartConfigs'; const CurrentChart = ({ coinData }) => { const chartRef = useRef(); const { day, week, year, detail } = coinData; useEffect(() => { if (chartRef && chartRef.current) { const chartInstance = new Chartjs(chartRef.current, { type: 'line', data: { datasets: [ { label: '# of Votes', data: day, backgroundColor: 'rgba(174, 305, 194, 0.5)', borderColor: 'rgba(174, 305, 194, 0.4', pointRadius: 0 } ] }, options: { ...historyOptions } }); chartInstance.update(); } }); window.dispatchEvent(new Event('resize')); return ( <div> <canvas ref={chartRef} id='myChart' width={250} height={250}></canvas> </div> ); }; export default CurrentChart; 

The data comes up when I first load the page, but when I hit minimize the chart becomes blank. The canvas itself is still there, but there's no data on the chart. Sometimes If I click the label a few times the data will show up