I am trying to implement chart js into a vanilla js project, but I cannot seem to make it work.
This is what I am using:
<script src=" https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js "></script>
<div id="profitChartContainer" style="width: 600px; height: 400px;"> <canvas id="myChart"></canvas></div>
I am using their example from the website but i also tried a lot of variations and always get the same error.
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
}],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
});
Does anyone know what can be the problem here?
core.datasetController.js:454 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'axis')
at BarController.parse (core.datasetController.js:454:26)
at BarController._insertElements (core.datasetController.js:1015:10)
at BarController._resyncElements (core.datasetController.js:985:12)
at BarController.buildOrUpdateElements (core.datasetController.js:425:10)
at Tn.update (core.controller.js:506:18)
at new Tn (core.controller.js:193:12)
After 7 hours of debugging, I finally found the problem: someone, somewhere in the codebase, had overwritten the built-in JavaScript Proxy
object. Naturally, since Chart.js relies on it, it couldn't create objects as intended. This was extremely difficult to debug and required commenting and uncommenting over 12,000 lines of code.