I am encountering an issue while trying to incorporate a chart from the charts.js library into my Vue.js and Vuetify application. The error message that keeps popping up is:
Failed to create chart: can't acquire context from the given item
Even after attempting to use the .getContext("2d) function, the error persists. It seems like the mounted method is functioning correctly since other functions are running smoothly without any problems, and all imports appear to be in order. I even gave JQUERY a shot, but unfortunately, the same issue lingers.
Here are some of my files for your reference: app.vue:
Canvas section from the template:
<canvas id="charting" width="600px" height="600px">
</canvas>
JS within app.vue:
<script>
import Chart from '../../../../node_modules/chart.js'
import coinCharts from './scripts/charts/randomcoin.js'
export default {
data() {
return {
coinCharts: coinCharts
}
},
methods: {
createChart(id, chartData) {
const ctx = document.getElementById(id).getContext("2d");
const chartRender = new Chart(ctx, {
type:chartData.type,
data:chartData.data,
options: chartData.options
})}
},
mounted() {
this.createChart("charting", this.coinCharts);
}
}
Imported script containing chart data:
export const coinCharts = new Chart({
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
options: {
responsive:true,
lineTension:1
}
})
export default coinCharts;
An error appears during compilation:
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'chartRender' is assigned a value but never used (no-unused-vars)
at src\components\views\coins\AlphaCoin.vue:50:11:
createChart(id, chartData) {
const ctx = document.getElementById(id).getContext("2d");
const chartRender = new Chart(ctx, {
type:chartData.type,
data:chartData.data,
options: chartData.options