Tengo un gráfico de barras con datos típicos: data: [1, 3, 4, 2] Cuando paso el mouse sobre la barra de datos, me gustaría que los valores muestren texto, donde 1 corresponde a "inicio", 2 es " parcial", etc. ¿Cómo puedo lograr esto? Parece que hay varias preguntas y respuestas similares sobre la información sobre herramientas, pero no he podido implementar esto. Mi código de gráfico de barras es:
const options = { scales: { x: { grid: { display: false, } }, y: { display: false }, } }; var config = { type: 'bar', data: { labels: ['date 1','date 2','date 3','date 4'], datasets: [{ data: [3, 2, 1, 3], label: chart 1, borderWidth: 1 }] }, options: options, } var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, config);Y traté de agregar el código de información sobre herramientas:
const options = { scales: { x: { grid: { display: false, } }, y: { display: false }, }, plugins: { tooltips: { callbacks: { title: function(tooltipItems, data) { return 'test'; }, label: function(tooltipItem, data) { return 'test 2'; } } } }, }; Si puedo hacer que la test aparezca en la información sobre herramientas, creo que puedo hacer el resto usando algo como:
myValue = ''; switch (data) { case 1: myValue = 'start'; break; case 2: myValue = 'partial' break; .... return myValue;En v3, el nombre de la configuración de información sobre herramientas ha cambiado de información sobre tooltips a información sobre tooltip :
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { plugins: { tooltip: { callbacks: { label: (val) => { return val.label + ' test ' + val.parsed.y } } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>