Vue.js Render Highchart - vue.js

Question

My chart Will not render I tried using query selector and refs. It is not throwing any errors just not rendering to the DOM.
The Template
The Function
createChart() {
let article = this.$el.querySelector(".highchart");
//let article = this.$refs.highchart;
HighCharts.chart(article, {
series: [
{
type: "treemap",
layoutAlgorithm: "squarified",
data: this.chartData
}
],
colorAxis: {
minColor: "#F98C32",
maxColor: "#F04E23"
},
title: {
text: `Total Items ${this.totalCount}`
}
});
}
Called in Mounted
mounted() {
this.createChart();
}

Answer 1

Have you considered using highcharts-vue official wrapper which is recommended? It can be downloaded here: https://github.com/highcharts/highcharts-vue. Check the code and demo posted below.
main.js:
import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
/* eslint-disable no-new */
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
App.vue:
<template>
<div id="app"><highcharts /> <btn /></div>
</template>
<script>
import Chart from "./components/Chart";
import Button from "./components/Button";
export default {
name: "App",
components: {
highcharts: Chart,
btn: Button
}
};
</script>
Chart.vue:
<template>
<div>
<highcharts
:options="chartOptions"
ref="lineCharts"
:constructor-type="stockChart"
></highcharts>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import stockInit from "highcharts/modules/stock";
import { EventBus } from "./../event-bus.js";
stockInit(Highcharts);
exportingInit(Highcharts);
export default {
props: {
partsdata: {
type: Array
}
},
components: {
highcharts: Chart
},
created() {
EventBus.$on("btn-clicked", data => {
this.chartOptions.series[0].data = data.newData;
});
},
data() {
return {
chartOptions: {
chart: {
type: "spline",
title: "Hassaan"
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
tooltip: {
crosshairs: true,
shared: true
},
credits: {
enabled: false
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: "#666666",
lineWidth: 1
}
}
},
series: [
{
data: [1, 2, 3]
}
]
}
};
}
};
</script>
Demo:
https://codesandbox.io/s/nw750l07nj