0
140
VistasChartjs no da 'xLabel' correctamente en la información sobre herramientas
Tengo un gráfico de líneas donde los datos se muestran como elementos de puntos según la etiqueta de los ejes X (eje de tiempo).
// Config chart const config = { type: "line", data: { labels: ['ene.', 'feb', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'], datasets // ex --> [{ x: 'jun.', y: 90 }] }, options: { tooltips: { callbacks: { title: function(context) { console.log(context); // Returning wrong xLabel } } } } }El problema es que cuando muestra la información sobre herramientas de, por ejemplo, junio, lo toma como índice 3, por lo que la información sobre herramientas del título (xlabel) se muestra como "Abril".
¿Cómo podría obtener la etiqueta adecuada en la información sobre herramientas, sin depender del índice?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Para V2, este comportamiento ya no se solucionará. Pero puede obtener las etiquetas correctas utilizando el segundo argumento en la devolución de llamada que le proporciona los datos:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [{ x: "Red", y: 5 }, { x: "Blue", y: 5 }, { x: "Purple", y: 5 }, { x: "Orange", y: 5 }], pointBackgroundColor: 'pink', borderColor: 'pink', fill: false }] }, options: { tooltips: { mode: 'point', callbacks: { title: (ctx, data) => (data.datasets[ctx[0].datasetIndex].data[ctx[0].index].x) } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta