Highcharts in Vue.js component

Question

I'm trying to create graphical components using Highcharts and Vue.js. I would like to pass the id attribute of the element to be used by Highcharts, but I can not get the attribute.

How can I set the id dynamically?

This is the HTML:

 <objective-chart :element="'brick-chart'"></objective-chart> 

And the javascript code:

 <template> <div id="{{element}}"></div> </template> <script> import Highcharts from 'highcharts'; export default{ props: ['element'], ready(){ $(function () { new Highcharts.Chart({ chart: { renderTo: this.element, type: 'bar', height: 200, margin: [0, 20, 0, 40] }, title: { text: null }, xAxis: { lineColor: null, labels: { rotation: -90 }, categories: [ 'Brick' ] }, yAxis: [{ min: 0, max:100, endOnTick: true, maxPadding: 0.02, gridLineColor: null, title: { text: null }, labels: { y: -50 }, }], legend: { shadow: false, verticalAlign: 'bottom' }, tooltip: { shared: true, followPointer: true }, plotOptions: { column: { grouping: true, shadow: false, borderWidth: 0 } }, credits: { enabled: false }, series: [{ name: 'Objetivo', color: 'rgba(224,224,224,1)', data: [100], pointPadding: 0.3, pointPlacement: -0.2 }, { name: 'Realizado', color: 'rgba(106,166,46,.9)', data: [76], pointPadding: 0.4, pointPlacement: 0.1 }, { type:'spline', name: 'Projeção', color: 'rgba(106,166,46,.9)', top: 10, pointPlacement: -0.05, data: [95], marker: { radius: 8, lineColor: '#666666', lineWidth: 1 } }] }); }); } } </script> 

Answer 1

vue.js 2.0 example (Vue start to use virtual dom):
1) npm install highcharts
2) var Highcharts = require('highcharts');
3) Highcharts.chart( this.$el , {...}) in "mounted" method because this.$el isn't available before "mounted"
4) the Instance of highcharts should be destroyed in "beforeDestroy" method.

 <template> <div><div> </template> <script> var Highcharts = require('highcharts'); export default { name : "Chart", props : { series : { type: Array, required: true } }, data : function() { return { target: undefined } }, mounted : function() { this.target = Highcharts.chart(this.$el, { title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: this.series }); }, beforeDestroy: function() { this.target.destroy(); }, } </script> 

And the parent component is:

 <template> <div id="app"> <h1>{{ msg }}</h1> <Chart :series = "initSeries"></Chart> </div> </template> <script> import Chart from './Chart.vue'; export default { name: 'app', components : {Chart}, data () { return { msg: 'Welcome to Your Vue.js App', } }, computed : { initSeries : function() { return [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }]; } } } </script> 

Answer 2

Edit: Check out the Vue 2 example from @Tody.Lu which is a great solution

You need to use renderTo: "#" + this.element to get a properly formatted ID selector.

I believe you can also use renderTo: this.$el without having an ID at all.

Edit: I checked my Highcharts component and this is how I have it:

$(this.$el).highcharts(data);

No need for an ID this way.

Answer 3

If you're using a central data store like Vuex, you can include chart increment property that stores the number of charts created, and increments when there is a new one.

Then you'd set the ID using a computed property:

computed: {
  id () {
    return 'highchart-' + idvar
  }
}

You could just as easily keep it in a global variable, but that's a bad idea.

Another option (one I've used in the past) is to create a random string in your component. I've used the UUID generator found at this answer .

if I use UUID function UUID.generate() to return a random string:

data () {
  return {
    uid: UUID.generate()
  } 
}

then use the generated uid property in a computed property:

computed: {
  id () {
    return 'chart-' + this.uid
  }
}

Then you'd use {{ id }} in your VM.

Answer 4

Take care, in your template you have:

<template>
    <div><div>
</template>

You need to have:

<template>
    <div></div>
</template>