You can use the cursor prop on the <Tooltip /> to achieve what you need: <Tooltip cursor={{fill: ‘#f00’}} /> Here‘s a working fiddle I made based on some example from their docs. You can simply use transparent as a value for the fill property. const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts; const … Read more
In your Line, Bar and Area add a name attribute. Example: <Line name=”# Apples” type=”monotone” dataKey=”series1″ stroke=”#FF0000″ /> <Line name=”# Bananas” type=”monotone” dataKey=”series2″ stroke=”#FFFF00″ /> <Line name=”# Grapes” type=”monotone” dataKey=”series3″ stroke=”#FF00FF” /> The legend will pick this up automatically: http://recharts.org/en-US/api/Legend By default, the content of legend is generated by the name of Line, Bar, Area, … Read more
You need to use ResponsiveContainer for it to work. Also, use the percentage values without brackets. <ResponsiveContainer width=”95%” height={400}> // your chart </ResponsiveContainer> I used that and it worked just fine! 🙂 Source: Responsive Container Docs
On YAxis component set the domain value from 0 to 100(or whatever u want) <YAxis type=”number” domain={[0, 20000]}/> Check this fiddle Link Domain DEFAULT: [0, ‘auto’] Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And each … Read more