title: Chart.js not rendering properly until window resize or toggling line in legend
body: <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>