Canvas: "object is undefined"

Question

I'm trying to create a line in Canvas. Everything was going well until I got stuck on this part:

import { Doughnut } from "react-chartjs-2";
import "chart.js/auto";
import { Chart, ChartData, ChartDataset, ChartOptions } from "chart.js";

function DoughnutChart(){
  const doughnutLabelsLine = {
    id: "doughnutLabelsLine",
    afterDraw(chart: Chart<"doughnut">, args: any, options: ChartOptions) {
      const {
        ctx,
        chartArea: { top, bottom, left, right, width, height },
      } = chart;

      chart.data.datasets.forEach((dataset, i) => {
        // console.log(chart.getDatasetMeta(i));
        chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
          console.log(dataset);
          const { x, y } = datapoint.tooltipPosition();
          //Object is possibly undefined
          ctx.fillStyle = dataset?.borderColor[index];
          ctx.fillRect(x, y, 2, 2);
        });
      });
    },
  };

//config...
//dataDoughnut

return (
        
          
        
);
}
export default DoughnutChart;

I have tried putting it into an if statement as well and using an exclamation mark, but that didn't work. Am I missing something here?

Edit: Made an adjustment based on user2057925's suggestion

DoughnutLabelsLine

  const doughnutLabelsLine = {
    id: "doughnutLabelsLine",
    afterDraw(chart: Chart<"doughnut">, args: any, options: ChartOptions) {
      const {
        ctx,
        chartArea: { top, bottom, left, right, width, height },
      } = chart;

      chart.data.datasets.forEach((dataset, i) => {
        // console.log(chart.getDatasetMeta(i));
        chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
          console.log(dataset);
          const { x, y } = datapoint.tooltipPosition();
          ctx.save();
          const borderColor = datapoint.options.borderColor as
            | string
            | CanvasGradient
            | CanvasPattern;
          ctx.fillStyle = borderColor;
          // ctx.fillStyle = dataset?.borderColor[index];
          ctx.fillRect(x, y, 10, 10);
          ctx.restore();
        });
      });
    },
  };

user2057925 · Answer

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:

you shouldn't need either the dataset instance or the index
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;
}

Canvas: "object is undefined"

1 Answers