Chart.js not rendering properly until window resize or toggling line in legend
<p>I'm trying to make an app to graph tide data using vue.js and chart.js. </p>

<p>I get my data from the Wunderground API using axios, format it for chart.js, then pass it using props to a component to graph it. However, when I initially load the page, a blank chart loads. Upon resizing the window, or toggling the dataset the data appears properly.</p>

<p>I've read <a href="https://stackoverflow.com/questions/38553187/chart-js-will-not-render-using-vue-js-until-window-resizes">Chart.js will not render using vue.js until window resizes</a>, which describes a similar problem, but unlike in that question, my canvas renders properly. The problem is only the dataset. </p>

<p>I've tried passing data through the props without using the API, and it works fine.</p>

<p><strong>LineChart component</strong></p>

<pre><code>export default {
  name: 'LineChart',
  props: ['data', 'options'],
  mounted() {
    let ctx = document.getElementById('chart').getContext('2d')
    let chart = new Chart(ctx, {
        type: 'line',
        data: this.data,
        options: this.options
    })
  }
}
</code></pre>

<p><strong>App component</strong>    </p>

<pre><code>export default {
  name: 'app',
  data() {
    return {
      url: 'http://api.wunderground.com/api/f219964b4d6ec312/tide/q/autoip.json',
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'Tide',
            data: []
          }
        ]
      },
      chartOptions: {
        responsive: true,
        scales: {
          xAxes: [{
            type: 'time',
          }]
        }
      }
    }
  },
  components: {
    LineChart
  },
  created() {
    this.getWeatherData()
  },
  methods: {
    getWeatherData() {
      axios.get(this.url).then((response) =&gt; {
        response.data.tide.tideSummary.filter(this.isTideData).forEach((obj) =&gt; {
          let d = new Date(0)
          d.setUTCSeconds(obj.date.epoch)
          this.chartData.labels.push(d)
          this.chartData.datasets[0].data.push(parseFloat(obj.data.height))
        })
      })
    },
    isTideData(obj) {
      return (obj.data.type == "Low Tide" || obj.data.type == "High Tide")
    }
  }
}
</code></pre>

<p>What am I doing wrong?</p>