js, canvas problem, need help fixing it?

Question

JavaScript

Code (Spoiler)

spoiler

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: myLabels,
      datasets: [{
        data: myData,
          backgroundColor: palette('tol', myData.length).map(function(hex) {
            return '#' + hex;
          }),
          hoverBorderColor: palette('tol', myData.length).map(function(hex) {
            return '#' + hex;
          }),
          hoverBorderWidth: '20px'
      }]
    },
    options: {

        cutout:'80%',
        responsive: true,
        plugins: {
            tooltip: {
                enabled: false,
            },
          legend: {
            display: false,
          },
          title: {
            display: false,
          }
        },
        
        onHover: function(event, activeElements){
            if (activeElements.length > 0) {
                

                var value = myChart.data.datasets[0].data[activeElements[0].index];

                payment_groups_js.current = value;

                var label = myChart.data.labels[activeElements[0].index];

                
           }
           else {
               payment_groups_js.current = payment_groups_js.total;
           }
           myChart.update();
        }
      },
  plugins: [chartAreaBorder, chartAreaBorder2, chartAreaBorder3]
});

The mistake itself

Uncaught TypeError: Cannot read property 'map' of null

At the same time, everything works on another domain (a friend asked me to look, until I can find the reason), if someone has ideas, I will be very grateful.

Answer 1

Konfy - thanks man helped find the solution.
The problem is in the tol variable (if the value is equal to 12 or more, it returns null), the problem was solved by replacing tol with sequential

Answer 2

Some of the calls return null . What is palette and why does it return null - find out for you palette('tol', myData.length)