how to show X and Y labels on points in Chart js 2 Line Chart

Question

I have made a line chart by X and Y axis using chartjs 2 in react js when I hover a point I wanted to show both x and y axis in the box appeared but I only got X axis Here is the code. I have used scatter chart . I want Line Chart point hover as same as the Scatter Chart. Kindly check and let me know about the solutions

<Line
  options={{
    title: {
      display: true,
    },
    legend: {
      display: false,
    },
    responsive: true,
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'index',
      intersect: false,
    },

    elements: {
      line: {
        fill: false,
        borderWidth: 5,
      },
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: 'black',
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 },
          ].map((z) => {
            return z.y;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: 'black',
            fontStyle: 'bold',
            labelString: 'True Positive Rate',
          },
        },
      ],
      xAxes: [
        {
          ticks: {
            fontColor: 'black',
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 },
          ].map((z) => {
            return 'X-axis' + z.x;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: 'black',
            fontStyle: 'bold',
            labelString: 'False Positive Rate',
          },
        },
      ],
    },
  }}
  height={150}
  data={{
    datasets: [
      {
        fill: false,

        borderColor: '#EC932F',
        backgroundColor: '#212F3D',
        pointBorderColor: '#B2BABB',
        pointBackgroundColor: '#D4AC0D',
        pointHoverBackgroundColor: '#D4AC0D',
        pointHoverBorderColor: 'black',

        lineTension: 0.1,
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',

        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBorderWidth: 2,
        pointRadius: 3,
        pointHitRadius: 10,

        data: [
          { x: 80, y: 90 },
          { x: 81, y: 29 },
          { x: 56, y: 36 },
          { x: 55, y: 25 },
          { x: 40, y: 18 },
        ],
      },
    ],
  }}
/>

Answer 1

Try this one,

<Line
  options={{
    title: {
      display: true
    },
    legend: {
      display: false
    },
    responsive: true,
    tooltips: {
      mode: "index",
      intersect: false,
      callbacks: { //Added callbacks for label
        title: () => {
          return "";
        },
        label: (tooltipItems, data) => {
          return "(" + tooltipItems.xLabel + "," + tooltipItems.yLabel + ")";
        }
      }
    },
    hover: {
      mode: "index",
      intersect: false
    },

    elements: {
      line: {
        fill: false,
        borderWidth: 5
      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: "black"
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 }
          ].map((z) => {
            return z.y;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: "black",
            fontStyle: "bold",
            labelString: "True Positive Rate"
          }
        }
      ],
      xAxes: [
        {
          ticks: {
            fontColor: "black"
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 }
          ].map((z) => {
            return z.x; // Changed this line
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: "black",
            fontStyle: "bold",
            labelString: "False Positive Rate"
          }
        }
      ]
    }
  }}
  height={150}
  data={{
    datasets: [
      {
        fill: false,
        borderColor: "#EC932F",
        backgroundColor: "#212F3D",
        pointBorderColor: "#B2BABB",
        pointBackgroundColor: "#D4AC0D",
        pointHoverBackgroundColor: "#D4AC0D",
        pointHoverBorderColor: "black",
        lineTension: 0.1,
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBorderWidth: 2,
        pointRadius: 3,
        pointHitRadius: 10,
        data: [
          { x: 80, y: 90 },
          { x: 81, y: 29 },
          { x: 56, y: 36 },
          { x: 55, y: 25 },
          { x: 40, y: 18 }
        ]
      }
    ]
  }}
/>