How to add avarage line in chart js in nextjs project

Question

I'm developing a chart using chart.js in nextjs project. i won't able to find a way to add average line using "annotation". is there any way to do that in nextjs.

this is how i import the chart js components.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
);

this is how i configure the options

export const options = {
  plugins: {
    tooltip: {
      callbacks: {
        title: (context: any) => {
          return context[0].label
        }
      }
    },
    title: {
      display: true,
      text: 'Egg Burn',
    },
  },
  responsive: true,
  scales: {
    x: {
      stacked: false,
      grid: {
        display: false
      },
      callback: function (value: any, index: any, ticks: any) {
        return '$' + value;
      },
    },
    y: {
      stacked: false,
      grid: {
        display: false
      }
    },
  },
  
};

this is the component

<Bar options={options} data={data} />