Cannot include high-charts in vue component

Question

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"}}}}

Wojciech Chmiel · Accepted Answer · 2019-02-07 10:56:49Z

1

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:

https://codesandbox.io/s/4p8xw74y9

answered Feb 7, 2019 at 10:56

Wojciech Chmiel

7,4071 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SM079 Over a year ago

Thanks, it works. i am trying to include bubble chart in highcharts but getting the error " Error in mounted hook: "Error: Highcharts error #17: www.highcharts.com/errors/17". It says "Highcharts Error #17 The requested series type does not exist This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.". how to overcome this

Wojciech Chmiel Over a year ago

You have to load highcharts-more module and initialize it. Docs: github.com/highcharts/…. Import: import HighchartsMore from 'highcharts/highcharts-more' and initialize: HighchartsMore(Highcharts);. If you found my answer helpful, please upvote, thanks.

Collectives™ on Stack Overflow

Cannot include high-charts in vue component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related