Attempting to create a line graph using chart js and vue, but new to both technologies. In the chart below, I am trying to change the tooltip to display "10 Answers July 19, 2023". I have attempted to use the beforeLabel and afterLabel options without success.

https://i.stack.imgur.com/PWEvH.png

<template>
  <div class="col-xs-12 col-md-4 analytic-container">
    <div class="row title justify-between">
      <div class="answer-count">
        <div class="">Answers</div>
        <h2 v-if="totalAnsCount != 0" class="q-ma-none">{{ totalAnsCount }}</h2>
      </div>
      <div class="filter">
        Last
        <q-btn-group flat>
          <q-btn
            :class="btnFlag === 7 ? 'select-interval' : 'unselect-interval'"
            flat
            label="7"
            @click="getChartData(7)"
          />
          <q-btn
            :class="btnFlag === 30 ? 'select-interval' : 'unselect-interval'"
            flat
            label="30"
            @click="getChartData(30)"
          />
          <q-btn
            :class="btnFlag === 90 ? 'select-interval' : 'unselect-interval'"
            flat
            label="90"
            @click="getChartData(90)"
          />
          <q-btn
            :class="btnFlag === 0 ? 'select-interval' : 'unselect-interval'"
            flat
            label="All"
            @click="getChartData(0)"
          />
        </q-btn-group>
        days
      </div>
    </div>
    <div class="row justify-between">
      <LineChart
        v-if="loaded"
        :data="data"
        :options="options"
        :style="{ height: '150px', width: '100%' }"
      />
    </div>
  </div>
</template>

<script>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  TimeScale,
} from "chart.js";

import { Line as LineChart } from "vue-chartjs";
import "chartjs-adapter-moment";
import { api } from "boot/axios";
import { useUserStore } from "src/stores/user";

// const infoStore = useUserStore();

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  TimeScale
);

export default {
  name: "App",
  components: {
    LineChart,
  },
  props: {
    workspaceUid: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      btnFlag: 0,
      totalAnsCount: 0,
      loaded: false,
      options: {
        responsive: true,
        hover: {
          intersect: false,
        },
        pointRadius: 1,
        plugins: {
          tooltip: {
            displayColors: false,
            callbacks: {
              label: function (context) {
                const label = context.dataset.label || "";
                const value = context.parsed.y;
                return `${label} ${value} Answers`;
              },
            },
          },
        },
        scales: {
          x: {
            type: "time", // Use time scale for X-axis
            time: {
              parser: "YYYY-MM-DD", // Specify the input date format
              unit: "day", // Display ticks as day
              displayFormats: {
                day: "MM/DD", // Format for the X-axis labels (day/month)
              },
              tooltipFormat: "MMMM D, YYYY", // Format for the tooltip
            },
            grid: {
              display: false,
            },
            border: {
              display: true,
              width: 1.5,
              color: "black",
            },
            ticks: {
              font: {
                size: 12, // Change the font size
                weight: "bold", // Set the font weight (e.g., "normal", "bold")
              },
            },
          },
          y: {
            grid: {
              display: false,
            },
            border: {
              display: true,
              width: 1.5,
              color: "black",
            },
            title: {
              display: true,
              color: "black",
              text: "# of Answers",
              font: {
                size: 14,
                weight: "bold",
              },
            },
            ticks: {
              font: {
                size: 12, // Change the font size
                weight: "bold", // Set the font weight (e.g., "normal", "bold")
              },
            },
          },
        },
      },
      data: {
        labels: [],
        datasets: [
          {
            data: [],
            borderColor: "#0d1f91",
            fill: false,
            borderWidth: 1,
          },
        ],
      },
    };
  },
  async mounted() {
    this.getChartData(7);
  },

  methods: {
    getChartData(interval) {
      this.totalAnsCount = 0;
      this.btnFlag = interval;
      this.loaded = false;
      api
        .get(
          process.env.BASE_URL +
            "/api/strategyAI/analytics/answers/?workspace_uid=" +
            this.workspaceUid +
            "&interval=" +
            interval
        )

        .then((response) => {
          console.log(
            response.data.data.map((item) => item.date),
            response.data.data.map((item) => item.answer_count)
          );
          this.data.labels = response.data.data.map((item) => item.date);
          this.data.datasets[0].data = response.data.data.map(
            (item) => item.answer_count
          );
          this.data.datasets[0].data.forEach((item) => {
            this.totalAnsCount += item;
          });
          this.loaded = true;
        })

        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 0px;
}
.primary {
  color: black;
  font-size: 12px;
}
.answer-count h2 {
  font-size: 40px;
  font-weight: 800;
  color: #0d1f91;
  text-align: right;
}
.analytic-container {
  display: flex;
  padding: 0px 15px 15px;
  justify-content: space-between;
  border: 1px solid #000;
  /* width: 750px; */
  flex-direction: column;
}
.answer-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 15px;
}
.select-interval {
  background: #acb9c7;
  color: #0d47a1;
  padding: 5px 12px;
}
.unselect-interval {
  background: #fff !important;
  color: #333333;
  padding: 5px 12px;
}
</style>

Attempting to draw a line graph using chart js and vue, but facing challenges due to being new to both technologies. Looking to modify the tooltip in the graph to show "10 Answers July 19, 2023", experimentation with beforeLabel and afterLabel options yielded no results.