nullPtr exception in orient()

[ldhasson]

Not sure why or how, but when i use this plugin, i get a null pointer exception when accessing 'origin' on first paint of the animation. By using the ?. operator, it works. The codebase i use is complex and i haven't had a chance to create a simple usecase and i don't quite understand the underlying logic much either.

But this bandaid works it seems 😄

function orient(point, origin) {
  var x0 = origin?.x;
  var y0 = origin?.y;

  if (x0 === null) {
    return {x: 0, y: -1};
  }
  if (y0 === null) {
    return {x: 1, y: 0};
  }

  var dx = point.x - x0;
  var dy = point.y - y0;
  var ln = Math.sqrt(dx * dx + dy * dy);

  return {
    x: ln ? dx / ln : 0,
    y: ln ? dy / ln : -1
  };
}

[ldhasson]

OK, so what i ended up doing is basically making ALL labels come up at the same location on the chart, so not good. This is the usecase i was able to pull together to reproduce in a straightforward HTML file:

<DIV id="CHART" style="position: relative; width:1000px; height:600px; border: 1px solid grey;">
  <CANVAS id="CHART_CNVS" style="border: 1px solid blue;"></CANVAS>
</DIV>

<SCRIPT type="module">
import { Chart, Tooltip , registerables } from "/static/jslibs/chartjs-4.4.3/chart.min.js";
import ChartDataLabels  from "/static/jslibs/chartjs-plugin-datalabels-2.2.0/chartjs-plugin-datalabels.esm.js";

Chart.register(...registerables);
Chart.register([Tooltip, ChartDataLabels]);

let config = {
  type: 'pie',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
       { data: [10.5, 20.6, 30.7, 40.9, 50.2, 60.3, 70.4, 80.2, 90, 100, 110, 120] }
     ]
   },
  options: {
    cutout: "60%"
   ,circumference: 180
   ,rotation: -90
   ,layout: { padding: 25 } 
   ,plugins: {
      legend: null
     ,datalabels: {
        color:'#666'
       ,font: { weight: 'bold', size: 14 }
       ,padding: 0
       ,textAlign: 'center'
       ,labels: {
           index: {
             align: 'end'
            ,anchor: 'end'
            ,offset: 10
            ,formatter: function(value, context) {
                return context.chart.data.labels[context.dataIndex];
              }
            }
          ,name: {
             align: 'top'
            ,formatter: function(value, context) {
                return value;
              }
            }
          ,value: {
             align: 'middle'
            ,offset: 10
            ,formatter: function(value, context) {
                return '10%';
              }
            }
         }
       }
     }
   }
 };

let chart = new Chart(document.getElementById('CHART_CNVS'), config);
</SCRIPT>

This is what i get:

This is all the more weird since on the Sample page (https://v2_2_0--chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html), i am getting what i want in a customized sample:

{
  type: 'pie',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      data: [10.5, 20.6, 30.7, 40.9, 50.2, 60.3, 70.4, 80.2, 90, 100, 110, 120]
    }
   ]
  },
  options: {
    cutout: "60%",
    circumference: 180,
    rotation: -90,
    padding: 20,
    layout: { padding: 150 }, 
    plugins: {
      datalabels: {
//        anchor: 'center',
//        align:'end',
//        offset: 0,
//        display: 'auto',
        color:'#666',
        font: {
          weight: 'bold'
          ,size:14
        },
        padding: 0,
        textAlign: 'center',
        labels: {
           index: {
            align: 'end',
            anchor: 'end',
            offset: 10,
            formatter: function(value, context) {
               return context.chart.data.labels[context.dataIndex];
                }
            }
         ,name: {
            align: 'top',
            formatter: function(value, context) {
               return value;
                }
            }
         ,value: {
            align: 'middle',
            offset: 10,
            formatter: function(value, context) {
               return '10%';
                }
            }
                     }
      }
    }
  }
}

Any help would be so much appreciated.

[ldhasson]

So, i figured out what the issue was... I minified the file chart.js and it's the cause of the failure. I tried a few different minifiers and options but no success. Is there something intrinsic to ChartJS that makes it not work when minified?