Diego J. Goulart Diego J. Goulart - 1 month ago 127
Javascript Question

Highcharts in Vue.js component

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

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.