I'm using ChartJs with vue3 in 2 two local proyects, one is pure Js the other one is with Ts. the Ts file was complaining so I decided to move that same Ts typed chart to the vue js proyect just for testing purposes. The problem is that I got this warn which is not letting the render occur:
It's strange because I got a similar Graph in other file .vue called => SimpleGraph and it's rendering correctly, here are the two files: LineChart.vue (The warn one)
<template>
<div class="container">
<canvas id="mychart"></canvas>
</div>
</template>
<script>
import { Chart } from "chart.js";
export default {
name: "LineChart",
mounted() {
const ctx = document.getElementById("myChart").getContext("2d");
// let chart: Chart<"line", number[], string>;
const myChart = new Chart(ctx, {
// The type of the chart you want to create.
type: "line",
// the data for our dataset
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: {
y: {
beginAtZero: true,
},
},
},
//options
})
myChart
},
setup() {
}
}
</script>
<style scoped>
.container {
margin: 0 auto;
width: 700px;
}
</style>
Here is the SimpleChart ( Render with no problem):
<template>
<div class="container">
<canvas id="myChart"></canvas>
</div>
</template>
<script>
import {
Chart,
LineController,
CategoryScale,
LinearScale,
PointElement,
LineElement,
TimeScale,
Tooltip,
} from "chart.js";
Chart.register(
LineController,
CategoryScale,
LinearScale,
PointElement,
LineElement,
TimeScale,
Tooltip,
)
import 'chartjs-adapter-date-fns'
import { enUS } from 'date-fns/locale'
export default {
name: 'SimpleChart',
mounted() {
const ctx = document.getElementById('myChart').getContext('2d'); // ctx => Context.
// SETUP BLOCK
const labels = ['RatingHistory'] // Data que aparece bajo el graph. X axis
const data = {
labels: labels,
datasets: [{
label: 'Rating',
data: [{x:'2019-06-14', y:1}, {x:'2019-09-14', y:1.5}, {x:'2020-03-11',y:2},{x:'2021-07-11', y:1.5}, {x:'2022-01-11', y:1}], // Array => Dinamic version of this should be ratingHistory
fill: true,
//backgroundColor: ['rgba(0, 0, 0, 0.1)', 'red', 'green', '#ccc'],
borderColor: 'rgb(75, 89, 192)', // string
backgroundColor: 'rgba(90, 230, 78, 0.2 )',
hoverBorderColor: 'rgb(252, 210, 159)',
tension: 0.4
},
{
label: 'My Second Dataset',
data: [1, 1.5, 3], // Array
fill: true,
backgroundColor: ['rgba(0, 0, 0, 0.1)', 'orange', 'green', '#ccc'],
borderCapStyle: 'solid',
borderWidth: 12,
borderColor: 'rgb(75, 120, 192)', // string
hoverBorderColor: 'rgb(252, 210, 159)',
tension: 0.1
}],
// Cuando hay Arrays => Va trabajando por unidades.
}
// AnnotationLine BLOCK
// const annotationLine = {
// id: 'annotationLine',
// beforeDraw: chart => {
// if (chart.tooltip._active && chart.tooltip._active.lenght){
// const ctx = chart.ctx;
// console.log(chart)
// }
// }
// }
// CONFIG BLOCK
const myChart = new Chart(ctx, {
// The type of the chart you want to create.
type: 'line',
data: data,
options: {
hover:{
mode: 'dataset',
intersect: true,
},
scales: {
x: {
type:'time',
time: {
unit:"month"
},
min: '2019-01-01',
max: Date.now(),
adapters: {
date: {
locale: enUS
}
}
},
y: {
beginAtZero: true,
min: 0,
max: 16
}
},
responsive: true,
plugins: {
legend: {
position: 'chartArea',
display: true
},
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltip: {
yAlign: 'bottom',
padding: 6,
}
}
},
// plugins: [annotationLine]
});
myChart
},
setup() {
}
}
</script>
<style scoped>
.container {
margin: 0 auto;
width: 700px;
}
</style>