Why is my Vue-ChartJS Chart data is not showing on ie10?

Question

I am using the pre-packaged script files from vue and vue-chartjs, and adding them to the page.

Initially no view was working and after opening the dev tools on ie10 I saw that the es6 stuff like =>, let and myFunc(): .... were breaking the page.

So I removed this and now the outline and layout of the chart shows and the axes proportions even change when new data is acquired. However no content is actually showing up in the charts.

My suspicion is that it is this new html tag, that ie does not recognise:

 <line-chart
  :data="myData"
  :options="{responsive: false, maintainAspectRatio: false}"
  :width="400"
  :height="200"
  >
 </line-chart>

Update:

The getQueueData function to get data from API

getQueueData: function() {
            var selectedBranch = this.selectedBranch;
            var selectedDay = this.selectedDay;
            var vm = this;
            this.$http.get('/api/v1/branches/' + selectedBranch + '/queues/' + selectedDay + '/').then(function(response) {
                vm.queueData = response.body;
                vm.fillData();
            }, function(response) {
                alert('Whoops! Something went wrong.')
                vm.queueData = [];
            });
        },

Answer 1

Well chartjs and vue and vue-chartjs are working fine in IE10. It depends on your workflow and pipeline. Javascript should be transpiled. And the is not a new html tag, it is a custom element for vue.js.

However I guess your problem is more the API call. Because the api call is async. So you open your page where the chart is, and the chart gets rendered before your data arrives.

You could set a variable like loaded or something and only render the chart if your data arrvied.

<line-chart
  v-if="loaded"
  :data="myData"
  :options="{responsive: false, maintainAspectRatio: false}"
  :width="400"
  :height="200"
  >
 </line-chart>



getQueueData: function() {
            var selectedBranch = this.selectedBranch;
            var selectedDay = this.selectedDay;
            var vm = this;
            this.$http.get('/api/v1/branches/' + selectedBranch + '/queues/' + selectedDay + '/').then(function(response) {
                vm.queueData = response.body;
                vm.fillData();
                vm.loaded = true
            }, function(response) {
                alert('Whoops! Something went wrong.')
                vm.queueData = [];
            });
        },