Currently, I am integrating Highcharts and Vue.js simultaneously while incorporating multiple charts on my webpage. As of now, I have successfully displayed data on all the charts without encountering any issues. However, my goal is to assign a special title to a particular graph.
The following are the files at hand:
StockChart.vue (this file serves as a shared component for all the charts)
<template>
<highcharts class="stock" :constructor-type="'stockChart'" :options="stockOptions"></highcharts>
</template>
<script>
export default {
props: [
'data'
],
data() {
return {
stockOptions: {
rangeSelector: {
selected: 'all',
buttons: [{
type: 'hour',
count: 6,
text: '6h',
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'all',
text: 'All'
}]
},
series: this.data,
title: {
text: this.data[0].myTitel,
}
}
}
},
... skipping rest of the content for brevity ...
and the second file called Temperature.vue, where the request for series is sent to the database and returned in order to be displayed on the designated chart.
...skipping content...
In the function dualData: function(paramQuery), I attempt to pass the argument myTitel (a specific title for just that chart), and subsequently, in Stockchart.vue, I aim to retrieve this value, but it seems to not work as intended. Can anyone suggest why this may be happening?
Is it necessary to create and handle a distinct Stockchart.vue for each individual chart?
Thank you!