Estoy mostrando un gráfico de barras que tiene 3 piezas diferentes de información (nombre del proyecto, número de días restantes y la fecha de finalización). Estoy mostrando el nombre del proyecto en un eje, y el número de días restantes determina la altura del bar. Actualmente, cuando paso el mouse sobre una barra, la información sobre herramientas muestra la información que ya se encuentra en los ejes x e y. En cambio, quiero que tenga la fecha de finalización.

es decir: el proyecto "b" finalizará en 2 días (4 de agosto), cuando pase el cursor sobre la barra, quiero que la información sobre herramientas diga "Fecha de finalización del 2022-08-04" en lugar de "b Días laborales restantes: 2"

Mi json de los datos se ve así:

 [{"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"}]

Aquí está el enlace de la gráfica actual. https://i.stack.imgur.com/HefRz.png Aquí hay una representación de MS Paint de lo que estoy tratando de hacer: https://i.stack.imgur.com/GAT2I.png

El código de implementación:

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