CODEWITHSUNDEEP
javascriptvue.jshighchartsvuejs2vue-component
SM079
SM079

Reputation: 713

Cannot include high-charts in vue component

Hi i am trying to include highcharts in my vue cli code inside a component. But i am getting "Unknown custom element: - did you register the component correctly?" For recursive components, make sure to provide the "name" option." in console.

I have installed the highcharts using the following commands

npm install --save highcharts

npm install highcharts-vue

Is there anything i am doing wrong or missing something ?

Home.vue

<template>
<div class="col-md-9 chartDiv">
  <h4 align='center'>{{ tableChart.title2 }}</h4>
  <div class="col-md-12">
    {{tableChart.chartOption}}
    <div class="chart-size center-block">
      <highcharts name="highcharts" v-bind:options="tableChart.chartOption" 
        ref="highcharts" charttype="highchart"></highcharts>
    </div>
  </div>
</div>
</template>

<script>
export default {
name: 'HomePage',
props: {
tableChart: {
  type: Object,
  required: false
}
},
data: function() {
return this.tableChart;
 }
};
</script>

App.vue

<template>
<div id="app">
<home-page v-bind:table-chart="tableData"></home-page>
</div>
</template>
<script>
import HomePage from './components/HomePage.vue';
import tableData2018 from './dataSource.js';
export default {
 name: 'app',
 components: {
   HomePage
 },
 data: function() {
  return {
    years: [2018, 2019, 2020],
    tableData: {}
  }
 },
methods: {
 initReport: function() {
  this.tableData = JSON.parse(tableData2018);
  }
},
created: function() {
  this.initReport();
}
};


main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

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



dataSource.js
{"chartOption":{"chart":{"plotBorderWidth":1,"type":"bubble","zoomType":"xy"},"credits":{"enabled":true,"href":"#","position":{"align":"right","verticalAlign":"bottom","y":-10},"text":"www.highcharts.com"},"exporting":{"enabled":false,"filename":"exportChart","type":"image/svg+xml","url":"http://export.highcharts.com.","width":600},"legend":{"align":"center","enabled":0,"floating":false,"layout":"vertical","verticalAlign":"bottom","x":0,"y":0,"z":0},"plotOptions":{"series":{"dataLabels":{"enabled":true,"format":"{point.name}"}}},"series":[{"data":[{"description":"Name","name":"xcode","x":1.02,"y":577039,"z":4092}]}],"title":{"text":""},"tooltip":{"followPointer":false,"footerFormat":"</table>","headerFormat":"<table>","pointFormat":"<tr><thcolspan=2><h5>{point.description}</h5></th></tr><tr><th>AdjustedReadmissions/ExpectedReadmissions:</th><td>{point.x}</td></tr><tr><th>ExpectedPenalty:</th><td>${point.y}</td></tr><tr><th>Index Admissions:</th><td>{point.z}</td></tr>","useHTML":1},"xAxis":{"gridLineWidth":1,"labels":{"format":"{value}"},"plotLines":[{"color":"black","dashStyle":"dot","value":1,"width":2,"zIndex":3}],"tickmarkPlacement":"on","title":{"text":"AdjustedReadmissions/ExpectedReadmissions"}},"yAxis":{"labels":{"format":"{value}"},"showFirstLabel":false,"title":{"text":"ExpectedPenalty"}}}}

Upvotes: 0

Views: 1334

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

In your main.js file, you should import highcharts-vue and load it before you call new Vue()

main.js:

import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";

Vue.config.productionTip = false;

Vue.use(HighchartsVue);

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

Demo:

Upvotes: 1

Related Questions