I am relatively new to Vuejs and API calling and I wanna find out how to fetch data from my API to display chart.
Currently, my code is:
<script>
import axios from 'axios'
export default {
name: 'Chart',
props: ['data'],
data: () => ({
}),
async mounted () {
let result = await axios.get('http://api.marketstack.com/v1/eod?access_key=b2508f27f2cef3694a66d6adf4646f87&symbols=AAPL')
this.data = result.data.data
// eslint-disable-next-line no-unused-vars
const data = ????? #need help here
}))
const ctx = document.getElementById('mychart').getContext('2d')
// eslint-disable-next-line no-undef,no-unused-vars
const Chart_2 = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data,
label: 'Chart from API ',
borderColor: '#7367F0'
}
]
},
options: {
scales: {
xAxes: [
{
}
],
yAxes: [
{
}
]
}
}
})
}
}
The above code is in a component Chart2.vue and will be displayed in App.vue. Would appreciate any help given!
The API URL: http://api.marketstack.com/v1/eod?access_key=b2508f27f2cef3694a66d6adf4646f87&symbols=AAPL