Having trouble populating my chart with data from the API. Despite setting extraOptions for my chart, it defaults to default options when rendered.
Here is the component code:
import { Bar, mixins } from 'vue-chartjs';
export default {
name: 'bar-chart',
extends: Bar,
mixins: [mixins.reactiveProp],
props: {
extraOptions: Object,
chartData: Object,
},
data() {
return {
ctx: null
};
},
methods: {
},
mounted() {
this.renderChart(
this.chartData,
this.extraOptions
);
this.$watch('chartData', (newVal, oldVal) => {
if (!oldVal) {
console.log(this.extraOptions)
this.renderChart(
this.chartData,
this.extraOptions
);
}
}, { immediate: true });
}
};
My overview containing Options and API call:
<div class="row">
<div class="col-lg-4">
<card>
<bar-chart :height="heightChart" :extraOptions="optionsBar" :chart-data="BarData"> </bar-chart >
</card>
</div>
</div>
</template>
<script>
import Loading from 'src/components/Dashboard/Layout/LoadingMainPanel.vue'
import LineChart from 'src/components/UIComponents/Charts/LineChart.vue'
import pieca from 'src/components/UIComponents/Charts/pieca.vue'
import Clock from './Clock.vue'
import BarChart from 'src/components/UIComponents/Charts/BarChart'
import axios from 'axios'
const WorldMap = () => ({
component: import('./../Maps/WorldMap.vue'),
loading: Loading,
delay: 200
})
export default {
components: {
LineChart,
pieca,
Clock,
BarChart
},
/**
* Chart data used to render stats, charts. Should be replaced with server data
*/
data () {
return {
optionsLine: {
...
},
optionsBar: {
...
},
heightChart: 255,
BarData: {
},
API request:
axios
.get('api_url')
.then(response => (globalthis.BarData = response.data.transporteur_jour
))
The issue seems to be that the chart reverts to default options after fetching data from the API. It works fine when directly feeding labels to the overview without calling the API. How can I maintain my extraOptions?
Appreciate any help!