CODEWITHSUNDEEP
javascriptvue.jshighchartsvuejs2vue-component
codebot
codebot

Reputation: 697

highcharts-vue gives error about the highcharts HTML element

I am using vue and the Highcharts-Vue plugin, to insert Highcharts charts in my project.

Following the instructions here, I first install it and then I register it globally. I go to my main.js and add it like so

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

new Vue({
  router,
  store,
  vuetify, 
  render: h => h(App)
}).$mount('#app')

Vue.use(HighchartsVue)

Then in my component (Hello.vue file) , 

<template>
  <div> 
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script> 
    import { mapGetters, mapActions } from 'vuex';  
    export default {
        name:'Hello',        
        data(){
          return{   
            chartOptions: {
                series: [{
                data: [1,2,3] 
              }]
            }
          }
        }
    }
</script>

The problem is that when I go to my app, I can see the chart , but in the browser console I get

[Vue warn]: Unknown custom element: <highcharts> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any help? How can I debug this? I am a Vue beginner, and I follow the instructions given, so its hard for me to get what is wrong.

Thanks

Upvotes: 0

Views: 637

Answers (1)

skirtle
skirtle

Reputation: 29092

You need to move this line:

Vue.use(HighchartsVue)

Before the new Vue(...). Currently you're registering it after Vue has rendered the page.

Upvotes: 1

Related Questions