Chartjs-Canvas: "object is undefined"

by

1👍

✅

I think the undefined error is not related to the dataset instance but due to the borderColor one.

Anyway the best thing could be to use the datapoint.options.borderColor because:

  1. you shouldn’t need either the dataset instance or the index
  2. the datapoint, being an ArcElement, provides in options node all its options, even if they are configured (using default).
const p = {
    id: "doughnutLabelsLine",
    afterDraw(chart, args, options) {
      chart.data.datasets.forEach((dataset, i) => {
        chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
          const { x, y } = datapoint.tooltipPosition();
          ctx.save();
          ctx.fillStyle = datapoint.options.borderColor;
          ctx.fillRect(x -5, y - 5, 10, 10);
          ctx.restore();
        });
      });
    }
};

const config = {
    type: 'doughnut',
    plugins: [p],  
    data: {
      labels: [6, 6, 4, 3, 2, 2, 1],
      datasets: [{
        label: 'Simple treemap',
        data: [6, 6, 4, 3, 2, 2, 1],
        borderColor: ['red', 'blue']
      }]
    },
  };
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, config);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
  </head> 
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment