javascript reactjs chart.js react-chartjs-2

How to change React line chart tooltip title font family in chart.js

I am using "chart.js": "^3.7.1", along with react-chartjs-2 in react web app. I want to change the chart tooltip font family. Here is the options i am using in the chart. I am unable to apply font family to the line chart. i want to apply a custom font for the title in the tooltip. i have used props mentioned in the documentation of chart js

const options = {
    animation,
    plugins: {
      tooltip: {
        backgroundColor: "#fff",
        displayColors: false,
        borderColor: "#8b7a7a",
        borderWidth: 0.5,
        bodyColor: "#0000",
        titleColor: "#8b7a7a",
        // bodyFontColor: "#8b7a7a",
        padding: 10,
        footerSpacing: 0,
        boxHeight: 10,
        title: {
          font: {
            size: 50,
            family: "'Work Sans',sans-serif",
          },
        },
        callbacks: {
          title: function (t, d) {
            let datae = moment(t[0].label).format("MMM DD, YYYY");
            const aa = t[0].dataset.label;
            const val = t[0].formattedValue;
            return `Date: ${datae.toString()}\n${aa}: ${val}`;
          },
        },
      },
      legend: {
        display: false,
      },
    },

    elements: {
      line: {
        tension: 0,
      },
    },
    legend: {
      display: false,
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
      },
    },
  };

Solution

As can be read here you need to configure the font for the tooltip title in the titleFont property and not in the title.font property:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        titleFont: {
          family: 'commic-sans-ms'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>