I'm not getting my graph with popular data from an api, can you help me, I do not know what I'm doing wrong!
<template>
<div class="py-1 bg-light px-5">
<div class="col-12 my-2">
<div class="card shadow-none border-0">
<div class="card-body">
<p>Site Traffic Overview</p>
<div id="content">
<canvas ref="chart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
import Chart from 'chart.js';
import ChartJs from '../../domain/Chart';
import ChartService from '../../services/Chart';
export default {
data () {
return {
dados: [],
month: [],
views: [],
dado: {month: '', views: ''}
}
},
mounted(dados){
listar: () => {
return http.get('apioculta')
}
ChartService.listar()
.then(resposta => {
dados = resposta.data;
console.log(dados)
})
.catch(error => {
console.log(error)
})
var chart = this.$refs.chart;
var ctx = chart.getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.dados.month,
datasets: [{
label: 'Traffic',
data: this.dados.views,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
maintainAspectRation: true
}
});
}
}
</script>