0

I created a project with Django. I am using Chart.js in my index page. But when I look the console, there are several errors like:

(index):4078 Uncaught ReferenceError: doughnutChart is not defined
    at (index):4078

I do not know how to solve it. Here is my code:

template.html

<canvas id="doughnutChart"    ></canvas>
<script>
var myDoughnutChart = new Chart(doughnutChart, {
           type: 'doughnut',
           data: {
               datasets: [{
                   data: ['{{ wait_senior_analyst|safe }}','{{ wait_lead|safe }}',
                       '{{ wait_manager|safe }}','{{ wait_regional_manager|safe }}',
                       '{{ wait_regional_director|safe }}','{{ wait_cfo|safe }}'],

                   backgroundColor: [   '#f6f349','#6def56',
                                       '#e90d73','#7f00d9',
                                       '#1df3f3','#ff7702']
               }],

               labels: [
               'Senior Analyst',
               'Lead',
               'Manager',
               'Regional Manager',
               'Regional Director',
               'CFO',
               ]
           },
           options: {
               responsive: true,
               legend : {
                   position: 'bottom',
                   labels: {
                   fontColor: {% if request.user.themeChoice == 'Light' %}"black"{% else %}"#d2fff2"{% endif %},
                   fontSize: 16
               }

               },



               layout: {

               }
           }
       });
</script>
edche
  • 636
  • 6
  • 33

1 Answers1

0

Have a look at the docs for chart.js.

It looks like you are not passing a valid node, jQuery instance, 2d context, or string id of the canvas of where you want to draw the chart to new Chart().

const ctx = document.querySelector('#doughnutChart');
var myDoughnutChart = new Chart(ctx, {
   type: 'doughnut',
   data: {...}
};

Alternatively, you can look at the source code.

ksav
  • 20,015
  • 6
  • 46
  • 66
  • Isn't `doughnutChart` [implicitly](https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) a node? – Ivar Aug 18 '21 at 07:00
  • 1
    Maybe in some cases, but that looks like a very unreliable way to work with the DOM. See https://stackoverflow.com/a/25325330/5385381 – ksav Aug 18 '21 at 07:02