Chart JS custom message on tooltip, not x and y axis-CodePudding

I am displaying a bar chart that has 3 different pieces of information, (project name, number of days remaining, and the end date.) I am displaying the project name on one axis, and the number of days remaining determines the height of the bar. Currently, when I hover over a bar the tooltip displays the information already on the x and y axis. I want it to instead have the end date.

ie: project "b" will end in 2 days (August 4th), when I hover over the bar I want the tooltip to say "End date of 2022-08-04" instead of "b Work Days Remaining: 2"

My json of the data looks like this:

[{"po_num": "a", "days_rem": 10, "date_end": "2022-08-16"}, 
{"po_num": "b", "days_rem": 2, "date_end": "2022-08-04"}, 
{"po_num": "c", "days_rem": 6, "date_end": "2022-08-10"}]

Here is the link of the current graph. https://i.stack.imgur.com/HefRz.png Here is an MS paint rendering of what I am trying to do: https://i.stack.imgur.com/GAT2I.png

The implementation code:

 link = "{{{BASE_BACK_URL}}}";
        $.getJSON(link, function (data) {
            let po_names = [];
            let days_rem = [];
            for (let i = 0; i < data.length; i  ) {
                po_names.push(data[i]["po_num"]);
                days_rem.push(data[i]["days_rem"]);
            }

            const ctx = document.getElementById('po-timeline-chart');
            const myChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: po_names,
                    datasets: [{
                        label: 'Work Days Remaining',
                        data: days_rem,
                        backgroundColor: 'rgb(0, 89, 178)'
                    }],
                },
                options: {
                    legend: {
                        align: "end"
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        });

CodePudding user response：

use date_end from data instead of days_rem. Have added the implementation below.

 $.getJSON(link, function (data) {
      let po_names = [];
      let days_rem = [];
      for (let i = 0; i < data.length; i  ) {
        po_names.push(data[i]["po_num"]);
        days_rem.push(data[i]["days_rem"]);
      }

      const ctx = document.getElementById("po-timeline-chart");
      const myChart = new Chart(ctx, {
        type: "horizontalBar",
        data: {
          labels: po_names,
          datasets: [
            {
              label: "Work Days Remaining",
              data: days_rem,
              backgroundColor: "rgb(0, 89, 178)",
            },
          ],
        },
        options: {
          tooltips: {
            enabled: true,
            callbacks: {
              // To change title in tooltip
              title: (data) => {
                return "This PO will run out on";
              },

              // To change label in tooltip
              label: (data) => {
                return date_end[data['index']];
              },
            },
          },
          legend: {
            align: "end",
          },
          scales: {
            xAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
          },
        },
      });
    });