Hay everyone, I am trying to make vertical line drawing on chart when I hover my mouse on some dot. I saw some solutions online but I didn't figer it out how to implement it on my code because I am very new at react js
this is an example of chart that has that vertical line that I am referring to - vertical line chart
Can someone help me do this?
This is my code:
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,
}}
/>
</>
);
}
}
As LeeLenalee already commented, a pure Chart.js solution is shown in this answer.
With react-chartjs-2, plugins needs to be defined as a separate option, same as data and options. In your case, this could look as follows.
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 = {
...
}
/>
);
}