CODEWITHSUNDEEP
reactjsrecharts
dan feithlicher
dan feithlicher

Reputation: 11

Trying to create a vertical line in recharts

So I have a graph I created with recharts, and I want to create a vertical line in it, where I marked it in red. I tried using the a ReferenceLine, but it doesnt really work. My code looks something like this:

const FEATURES = [{
    name: "y1",
    color: "orange"
},{
    name: "y2",
    color: "red"
},{
    name: "y3",
    color: "green"
},{
    name: "y4",
    color: "blue"
},{
    name: "y5",
    color: "pink"
},{
    name: "y6",
    color: "black"
}
]

const createLines = () => {
    let lines = []
    FEATURES.forEach((feature) => {
        lines.push(<Line strokeWidth={2} dot={false} animationDuration={500} isAnimationActive={true} animationEasing="linear" type="linear" yAxisId={feature.name} dataKey={feature.name} stroke={feature.color} />)
    })
    return lines
}

const createYAxis = () => {
    let yAxis = []
    FEATURES.forEach((feature, index) => {
        yAxis.push(<YAxis yAxisId={feature.name} orientation={(index % 2 == 0) ? "right" : "left"} tick={{ stroke: feature.color }} dataKey={feature.name}></YAxis>)
    })
    return yAxis
}

const AnalysisChart = (props) => {
{/*markupDate is the value in the x axis I want to make the line itself, more specifically 14.10.18 20:16:00*/}
    const markupDate = moment.utc(props.chosenAnalysisDateTime).format("DD.MM.YY HH:mm:SS")
    return (
        <div className="analysisShadowContainer">
            <div className="analysisContainer">
                <div className="header">
                    <span className="exit-button" onClick={() => props.setIsAnalysisOpen(false)}>X</span>
                </div>
                <LineChart width={1200} height={300} data={props.analysisData}>
                    {createLines()}
                    <CartesianGrid stroke="#ccc" />
                    <Tooltip />
                    <Legend verticalAlign="top" height={36} />
                    <XAxis alwaysShow={true} scale="auto" dataKey="datetime" tickFormatter={(datetime) => moment(datetime).format("DD.MM.YY HH:mm:SS")} />
                    <ReferenceLine strokeDasharray="3 3" yAxisId={"y6"} x={markupDate} stroke="red" label="Min PAGE" />
                    {createYAxis()}
                </LineChart>
            </div>
        </div>
    )
}

I looked around online for some solutions, but couldnt really find anything useful. I tried playing around with the props of the ReferenceLine, had a problem where I had "cant read undefined of "scale" in reference line", added a "yAxisId" prop which is what I read online, but haven't really succeeded in making a vertical line actually appear in the graph: Current graph with where I want the vertical line

Is there another way to add a vertical line maybe?

Upvotes: 1

Views: 4721

Answers (1)

Orlyyn
Orlyyn

Reputation: 2614

The ReferenceLine is exactly the component you need in recharts to show a vertical line in your graph.

To set the x value for the ReferenceLine, the docs state that the props x must be either a number, or a string. And in your code, you are giving the result of moment.utc(...), which is not either of them. Try to convert the result to a string (like markupDate.toString()), for a better result.

Upvotes: 3

Related Questions