title: Canvas: "object is undefined"
body: <p>I'm trying to create a line in Canvas. Everything was going well until I got stuck on this part:</p>
  <pre class="lang-js prettyprint-override"><code>import { Doughnut } from &quot;react-chartjs-2&quot;;
  import &quot;chart.js/auto&quot;;
  import { Chart, ChartData, ChartDataset, ChartOptions } from &quot;chart.js&quot;;
  
  function DoughnutChart(){
    const doughnutLabelsLine = {
      id: &quot;doughnutLabelsLine&quot;,
      afterDraw(chart: Chart&lt;&quot;doughnut&quot;&gt;, args: any, options: ChartOptions) {
        const {
          ctx,
          chartArea: { top, bottom, left, right, width, height },
        } = chart;
  
        chart.data.datasets.forEach((dataset, i) =&gt; {
          // console.log(chart.getDatasetMeta(i));
          chart.getDatasetMeta(i).data.forEach((datapoint, index) =&gt; {
            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 (
          &lt;div className=&quot;col-span-6&quot;&gt;
            &lt;Doughnut
              data={dataDoughnut}
              options={config}
              width={200}
              height={300}
              plugins={[doughnutLabelsLine]}
            /&gt;
          &lt;/div&gt;
  );
  }
  export default DoughnutChart;
  </code></pre>
  <p>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?</p>
  <p>Edit: Made an adjustment based on user2057925's suggestion</p>
  <p>DoughnutLabelsLine</p>
  <pre class="lang-js prettyprint-override"><code>  const doughnutLabelsLine = {
      id: &quot;doughnutLabelsLine&quot;,
      afterDraw(chart: Chart&lt;&quot;doughnut&quot;&gt;, args: any, options: ChartOptions) {
        const {
          ctx,
          chartArea: { top, bottom, left, right, width, height },
        } = chart;
  
        chart.data.datasets.forEach((dataset, i) =&gt; {
          // console.log(chart.getDatasetMeta(i));
          chart.getDatasetMeta(i).data.forEach((datapoint, index) =&gt; {
            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();
          });
        });
      },
    };
  </code></pre>