unfortunately I fail with this example. I include the following scripts:

 <script src=".6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="module" src="/[email protected]/dist/helpers.esm.min.js"></script>
<script src="/[email protected]/dist/chart.min.js"></script>
<script src="/[email protected]/dist/chart.js"></script>
<script type="module" src="/[email protected]/dist/chart.esm.min.js"></script>

unfortunately I fail with this example. I include the following scripts:

 <script src="https://code.jquery./jquery-3.6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.jsdelivr/npm/[email protected]/dist/helpers.esm.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chart.js"></script>
<script type="module" src="https://cdn.jsdelivr/npm/[email protected]/dist/chart.esm.min.js"></script>

and this is my function(it is a copy from the example side) https://www.chartjs/docs/3.2.0/samples/other-charts/doughnut.html

function donutchart(){

    //-----SETUP-------
    const DATA_COUNT = 5;
    const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};

    const data = {
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
    datasets: [
        {
        label: 'Dataset 1',
        data: Utils.numbers(NUMBER_CFG),
        backgroundColor: Object.values(Utils.CHART_COLORS),
        }
    ]
    };

    //-----Config----------
    const config = {
        type: 'doughnut',
        data: data,
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Chart.js Doughnut Chart'
            }
          }
        },
      };

      //-------Actions--------
      const actions = [
        {
          name: 'Randomize',
          handler(chart) {
            chart.data.datasets.forEach(dataset => {
              dataset.data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
            });
            chart.update();
          }
        },
        {
          name: 'Add Dataset',
          handler(chart) {
            const data = chart.data;
            const newDataset = {
              label: 'Dataset ' + (data.datasets.length + 1),
              backgroundColor: [],
              data: [],
            };
      
            for (let i = 0; i < data.labels.length; i++) {
              newDataset.data.push(Utils.numbers({count: 1, min: 0, max: 100}));
      
              const colorIndex = i % Object.keys(Utils.CHART_COLORS).length;
              newDataset.backgroundColor.push(Object.values(Utils.CHART_COLORS)[colorIndex]);
            }
      
            chart.data.datasets.push(newDataset);
            chart.update();
          }
        },
        {
          name: 'Add Data',
          handler(chart) {
            const data = chart.data;
            if (data.datasets.length > 0) {
              data.labels.push('data #' + (data.labels.length + 1));
      
              for (var index = 0; index < data.datasets.length; ++index) {
                data.datasets[index].data.push(Utils.rand(0, 100));
              }
      
              chart.update();
            }
          }
        },
        {
          name: 'Remove Dataset',
          handler(chart) {
            chart.data.datasets.pop();
            chart.update();
          }
        },
        {
          name: 'Remove Data',
          handler(chart) {
            chart.data.labels.splice(-1, 1); // remove the label first
      
            chart.data.datasets.forEach(dataset => {
              dataset.data.pop();
            });
      
            chart.update();
          }
        }
      ];

      // === include 'setup' then 'config' above ===
    
      var myChart = new Chart(
        document.getElementById('Quota'),
        config
      );
}

If i run the script i get the following error message: Uncaught ReferenceError: Utils is not defined

and now I've been looking for one or two days what "utils" is and how I can integrate it

Please Help me! Thx Thomas

• javascript
• chart.js

• Replace Utils.numbers(...) with [1,2,3,4,5]. Does it help? – Michael Rovinsky Commented Apr 27, 2021 at 20:21
• Hi Michael, thank you! – Ninil Commented May 1, 2021 at 18:56

1 Answer 1

Utils is a helper file chart.js uses and makes internally to generate datasets and some more things, it was removed as a public source in chart.js version 3, if you want to use it you can download it here: (https://github./chartjs/Chart.js/blob/master/docs/scripts/utils.js) or get the online file here: (https://www.chartjs/samples/2.9.4/utils.js)

If you want a good starting point/example you can copy the code from the usage page, there is the chart code for a basic chart where you don't need anything else for: https://www.chartjs/docs/master/getting-started/usage.html