I have integrated Chart.js into my Vue project.
After installing chart.js and @types/chart.js using npm, I included a chart.d.ts file with the line declare module 'chart.js'; .
Encountered an error which can be viewed https://i.sstatic.net/8npRM.png
The error message indicates that a closing curly bracket is expected at line 43. However, in my code editor, there are no visible red lines at line 43, typically signaling missing parentheses.
Here is the relevant code snippet:
import Vue from "vue";
import Chart from 'chart.js';
export default Vue.extend({
name: "CompanyCardComponent",
components: {
},
data() {
return {
color: "green" as string
};
},
mounted() {
const canvas = <HTMLCanvasElement> document.getElementById('myChart');
const ctx = canvas.getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', <---------------------- Line 43 Line 43 Line 43 Line 43 Line 43
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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
}
}]
}
}
})
}
});
This is my ESLINT Configuration (.eslintrc.js):
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
Any idea why this error is occurring?