I am using chartjs with the vue-chartjs wrapper and trying to create a Line Chart using data fetched from my api. The data prints to the console as expected and I do not get a error in the console. The resulting Line Chart does not display at all in the browser. There is, however a large amount of white space where the canvas
tag is injected. I can create a doughnut chart fine, just not this line chart. Your help is greatly appreciated! I am using code from the Chart examples found at https://vue-chartjs.org/examples/ 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>
CodePudding user response:
Usually when a chart is not shown, there is an issue on the data configuration.
In your data config, the datasets
option seems to be defined as an object but instead should be an array.
data: {
labels: dates,
datasets: { // <--- should be an array.
label: 'Ratings by date',
data: ratings,
backgroundColor: '#f87979'
}
},
It should be:
data: {
labels: dates,
datasets: [{
label: 'Ratings by date',
data: ratings,
backgroundColor: '#f87979'
}]
},