[Vuejs]-How to pass data for chart in chart.js without getting a type error

by

0👍

✅

The bug is in the way you are defining your chart data. Try this in place of your chart data definition

const chartData = computed(() => {
    const currentUser = user.value;
    const typingTestResults = currentUser?.typingTestResults;

    return {
        labels: typingTestResults?.map(result => result.created_at),
        datasets: [
            {
                label: 'WPM',
                data: typingTestResults?.map(result => result.wpm),
                backgroundColor: 'rgba(255, 174, 0, 0.2)',
                borderColor: 'rgb(255, 174, 0)',
                borderWidth: 3,
                pointRadius: 6,
                tension: 0.1,
                acc: typingTestResults?.map(result => result.accuracy),
                time: typingTestResults?.map(result => result.duration_seconds),
            }
        ],
    };
});

It should work. the bug is due to additional properties of acc and timethat you have added to chart data.

Leave a comment