Problem using npm of chart.js in django Project #10832

Parsa-kv · 2022-10-26T21:48:51Z

Parsa-kv
Oct 26, 2022

I tried to use Chart.js in my Django project , when I Use NPM package it's not working but when I use CDN It work Perfectly

chart.js version 3.9.1

here is my index.html file on my project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
{#    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>#}
    <script type="application/json" src="/node_modules/chart.js/dist/chart.js"></script>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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],
            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
            }
        }
    }
});
</script>


</body>
</html>

my console error in browser is :

(index):17 Uncaught ReferenceError: Chart is not defined at (index):17:17

I tried to use chart.min.js in my script but not working. I also Try previous version of charj.js but still not working. I also copy code on CDN and put it locally on project but still not working.

LeeLenaleee · 2022-10-27T08:42:39Z

LeeLenaleee
Oct 27, 2022
Maintainer

There is no /node-modules when it's in your browser so that won't work, you need to use a cdn or a build tool that includes chart.js on build but you can't use a header script tag to node modules

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Problem using npm of chart.js in django Project #10832

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Problem using npm of chart.js in django Project #10832

Uh oh!

Parsa-kv Oct 26, 2022

Replies: 1 comment

Uh oh!

LeeLenaleee Oct 27, 2022 Maintainer

Parsa-kv
Oct 26, 2022

LeeLenaleee
Oct 27, 2022
Maintainer