CODEWITHSUNDEEP
reactjschartsrecharts
YOBB
YOBB

Reputation: 125

ReCharts label position not working

I have created a Line Chart and tried to position 2 labels on top of it without success. I used 2 reference lines, at the beginning and at the end and the labels on top of them. I'm trying to achieve the following:

L1     L2
|
|_______

And the code:

<ResponsiveContainer height={300} width="100%">
   <LineChart data={myData}>
     <ReferenceLine x={0} label={{value:"L1", position:"top"}} />
     <ReferenceLine x={mydata.length-1} label={{value:"L2", position:"top"}}/>
     <XAxis dataKey=" " />
     <YAxis />
     <Line type="monotone" dataKey="value" stroke="#8884d8" />
   </LineChart> 
</ResponsiveContainer>

Upvotes: 4

Views: 9659

Answers (1)

TomK
TomK

Reputation: 363

Four things to check:

  1. You have a typo in your second ReferenceLine. It should read myData, not mydata.

  2. Your use of a number for x in your ReferenceLine implies that you are plotting numbers, but the default is 'categories'. Add type='number' to <XAxis/>

  3. You have a blank string for X-Axis dataKey. It should be replaced with the actual key.

  4. Your syntax for specifying a label for the reference line is wrong. You simply say label="L1". AFAIK, you cannot specify its position. It always ends up in the middle of the line.

Putting all this together, and your code should look like:

class RefLine extends React.Component{

    render(){
        const myData = [{x:-2, value:5}, {x:3, value:10}, {x:5, value:11}];
        return (
            <ResponsiveContainer height={300} width="100%">
                <LineChart data={myData}>
                    <ReferenceLine x={0} label="L1"/>
                    <ReferenceLine x={myData.length-1} label="L2"/>
                    <XAxis dataKey="x" type="number"/>
                    <YAxis />
                    <Line type="monotone" dataKey="value" stroke="#8884d8" />
                </LineChart>
            </ResponsiveContainer>
        )
    }
}

Upvotes: 4

Related Questions