[Chartjs]-Chart JS custom message on tooltip, not x and y axis

1👍

Solution listed 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,
                },
              },
            ],
          },
        },
      });
    });

Leave a comment