0
243
Visualizações¿Hay alguna manera de cambiar la información sobre herramientas de react-chart-js solo en un gráfico?
tengo lo siguiente:
const labels = historicosData.map(historico => { const localDate = new Date(historico.fechaIngreso); return localDate.toLocaleString('es-ES', { month: 'long' }) }); //const labels = historicosData.map(({ anio }) => anio); // const labels = [123, 321, 456, 123, 4568] const data = { labels, datasets: [ { label: 'Valores históricos', fill: false, backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)', pointBorderColor: 'rgba(75,192,192,1)', pointBackgroundColor: '#fff', pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 10, pointRadius: 10, pointHitRadius: 10, data: historicosData.map(({ valor }) => valor), }, ], }; Y muestra el siguiente gráfico: 
¿Hay alguna manera de cambiar el mensaje predeterminado de la información sobre herramientas (el que dice 'mayo') por un mensaje personalizado?
Mi objetivo principal es hacer que el eje inferior X muestre solo el nombre de los meses y muestre la fecha completa cuando el usuario pase el mouse sobre un punto específico
1 Respostas
Responde à pergunta0
Puede utilizar el accesorio de options de la siguiente manera para personalizar el título de la información sobre tooltip :
const options = { responsive: true, plugins: { tooltip: { callbacks: { title: (context) => { return context[0].label }, } }, }, } Luego pase options como apoyo a su componente Line :
<Line options = {options} data = {data} />
En el ejemplo anterior, context[0].label que es la etiqueta que ya ves en el eje x. Puede cambiar el valor de retorno a cualquier cosa que desee, y también puede poner otra lógica necesaria dentro de la devolución de llamada.
Por ejemplo, puede optar por devolver context[0].parsed.x en lugar de la etiqueta. O puede optar por usar este valor para armar el título final para devolver.
Obtenga más información sobre la configuración de información sobre herramientas en los documentos .