Hey there! I'm currently working on integrating Chart.js with the vue-chartjs wrapper to build a Line Chart using data retrieved from my API. The data is being successfully logged to the console without any errors, but for some reason, the Line Chart itself is not displaying on the browser. Instead, there's just a lot of white space where the canvas tag should be. Oddly enough, I can create a doughnut chart with no issues, just not this particular line chart. Any guidance or assistance on this matter would be highly appreciated! I'm referencing the Chart examples available at for the LineChart component
IndexView.vue
<script setup>
import axios from 'axios'
import { onMounted, reactive } from 'vue'
import LineChart from '@/components/LineChart.vue'
const data = reactive({
user: null,
totals: null,
checkins: null
})
const state = reactive({
loading: true
})
const charts = reactive({
doughnutConfig: null,
lineConfig: null
})
onMounted(async () => {
// load data from store and api
data.user = await userStore.fetchUser()
const user_resp = await axios.get(...)
data.totals = user_resp.data.totals
data.checkins = user_resp.data.check_ins
state.loading = false
// create line chart
var dates = []
var ratings = []
var length = data.checkins.length < 10 ? data.checkins.length : 10
for (var i = 0; i < length; i++) {
dates.push(data.checkins[i].date)
ratings.push(data.checkins[i].rating)
}
console.log(dates) // [ "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-05T00:00:00" ]
console.log(ratings) // [ 5, 5, 3, 2, 4 ]
charts.lineConfig = {
data: {
labels: dates,
datasets: {
label: 'Ratings by date',
data: ratings,
backgroundColor: '#f87979'
}
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
}
}
}
})
</script>
<template>
<LineChart
v-if="charts.lineConfig"
:chart-options="charts.lineConfig.options"
:chart-data="charts.lineConfig.data"
:width="400"
:height="300"
/>
</template>LineChart.vue
<script setup>
import { defineProps } from 'vue'
import { Line } from 'vue-chartjs'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale
} from 'chart.js'
ChartJS.register(
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale
)
const props = defineProps({
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
required: true
},
chartId: {
type: String,
default: 'line-chart'
},
width: {
type: Number,
required: true
},
height: {
type: Number,
required: true
}
})
</script>
<template>
<Line
:chart-id="props.chartId"
:chart-data="props.chartData"
:chart-options="props.chartOptions"
:width="props.width"
:height="props.height"
/>
</template>