Hola a todos, estoy tratando de hacer un dibujo de línea vertical en el gráfico cuando paso el mouse sobre algún punto. Vi algunas soluciones en línea, pero no descubrí cómo implementarlas en mi código porque soy muy nuevo en reaccionar js
este es un ejemplo de gráfico que tiene esa línea vertical a la que me refiero - gráfico de líneas verticales
¿Puede alguien ayudarme a hacer esto?
Este es mi código:
import React, { Component } from "react"; import "../App.css"; import { Line } from "react-chartjs-2"; import { Chart as ChartJS, Filler } from "chart.js/auto"; export default class Chart extends Component { constructor(props) { super(props); this.state = { mapRecv: props.data[0], type: props.data[1], }; } render() { return ( <> <Line className="chart" data={{ labels: this.state.mapRecv["stockChartXValues"], datasets: [ { label: `${this.state.type} Price USD`, data: this.state.mapRecv["stockChartYValues"], fill: true, backgroundColor: ["rgba(75, 192, 192, 0.2)"], borderColor: "rgba(75, 192, 192, 1)", borderWidth: 2, }, ], }} plugins={{ afterDraw: (chart) => { if (chart.tooltip?._active?.length) { let x = chart.tooltip._active[0].element.x; let yAxis = chart.scales.y; let ctx = chart.ctx; ctx.save(); ctx.beginPath(); ctx.setLineDash([5, 5]); ctx.moveTo(x, yAxis.top); ctx.lineTo(x, yAxis.bottom); ctx.lineWidth = 1; ctx.strokeStyle = "rgba(0, 0, 255, 0.4)"; ctx.stroke(); ctx.restore(); } }, }} options={{ scales: { x: { grid: { drawOnChartArea: false, }, }, }, position: "right", showLine: true, elements: { point: { radius: 0, }, }, plugins: { legend: { display: false, }, }, interaction: { intersect: false, mode: "index", }, spanGaps: true, }} /> </> ); } }Como ya comentó LeeLenalee , en esta respuesta se muestra una solución Chart.js pura.
Con react-chartjs-2 , los plugins deben definirse como una opción separada, al igual que los data y las options . En su caso, esto podría verse de la siguiente manera.
render() { return ( <Line data = { ... } plugins = { [{ afterDraw: chart => { if (chart.tooltip?._active?.length) { let x = chart.tooltip._active[0].element.x; let yAxis = chart.scales.y; let ctx = chart.ctx; ctx.save(); ctx.beginPath(); ctx.setLineDash([5, 5]); ctx.moveTo(x, yAxis.top); ctx.lineTo(x, yAxis.bottom); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(0, 0, 255, 0.4)'; ctx.stroke(); ctx.restore(); } } }] } options = { ... } /> ); }