How to add solid round dot in rechart - reactjs

I'm plotting lineChart with rechart, and when there is dashed line, dot of that chart also becoming dash, but I want full circle instead of dashed circle how to do that?
This is the code I've used
<LineChart width={600} height={300} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 10}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name" height={60} />
<YAxis/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" label={<CustomizedLabel />}/>
<Line type="monotone" strokeDasharray="3 3" dataKey="uv" stroke="red" />
</LineChart>
And output:
I want red dot to be fully circle instead of dotted circle, only line shouid be dashed,Please someone help
Thanks


You can customize and render custom dot by using active dot property inside Line component, here is example :
<Line type="monotone" strokeDasharray="3 3" dataKey="uv" stroke="red"
dot={{ stroke: 'red', strokeWidth: 1, r: 4,strokeDasharray:''}}
/>
here is another example of customizing dot in the official documentation of recharts :
https://recharts.org/en-US/examples/CustomizedDotLineChart
here is an adaptation of your code:
https://jsfiddle.net/ys6zwjaL/#&togetherjs=0jVcg5yr0N

Related

how to dynamically show arrays into rechart line chart

I have arrays as given below and how to convert it into rechart in multiple lines
[ {
"propertyName": "test Test",
"jan": 236031.1,
"feb": 177236.89,
"mar": 349608.46,
"apr": 517771.92,
"may": 291694.24,
"jun": 73785.15,
"jul": 4456502.74,
"aug": 260281.28,
"sep": 105938.32,
"oct": 22937.94,
"nov": 29123.74,
"dec": 4600.18
}]
the given format is like this
<LineChart width={600} height={300}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis type="number" dataKey="name" domain={['auto', 'auto']} />
<YAxis/>
<CartesianGrid strokeDasharray="3"/>
<Tooltip/>
<Legend />
<Line type="monotone" data={data1} dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
<Line type="monotone" data={data2} dataKey="uv" stroke="#82ca9d" />
</LineChart>

How to make React-Recharts responsive for all kind of device particularly?

I'm using React Recharts to show some chart data. I am using ComposedResponsiveContainer for my app component and the heights of it is set to "100%" by default. But in my app, I can't see this.
I'm using Tailwind CSS and thought className="h-full w-full" would help, but it's not. I also changed its height and width to something like the image and its showing this error:
what can I do to overcome this?

Remove height and width properties and set your container inside a grid-cols

Remove height & width
Use ResponsiveContainer example:
<ResponsiveContainer>
<AreaChart
data={data}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
</ResponsiveContainer>

How to display React Recharts dynamically?

I am using React Recharts and I want to display it dynamically.
https://recharts.org/en-US/examples/CustomActiveShapePieChart
<ResponsiveContainer width='99%' aspect={3.0 / 2.0}>
<LineChart width={500} height={300} data={this.state.android}>
{/* margin={{ top: 5, right: 0, left: -40, bottom: 5 }}> */}
<XAxis dataKey="Date"/>
<YAxis/>
<Tooltip />
<Legend />
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
{/* "#AD7BEC"
"#F88E4E" */}
<Line name="android" type="monotone" dataKey="android" stroke="#ff883c" strokeWidth={2} />
<Line name="ios" type="monotone" dataKey="ios" stroke="#ffb847" strokeWidth={2} />
</LineChart>
</ResponsiveContainer>
This is my code for plotting line chart of recharts but I am doing this in hard code way... Now I have a data key array which is generated dynamically and now I want to pass that key to there
<Line name="android" type="monotone" dataKey="android" stroke="#ff883c" strokeWidth={2} />
And I want to pass element of array to datakey variable like this
dynamic_array=["android","ios","value"]
<Line name="android" type="monotone" dataKey=dynamic_array[0] stroke="#ff883c" strokeWidth={2} />
Can I apply map or forEach?

Indeed you can use the map method to create as many Line you need, just like this:
renderLines () {
dynamic_array = ["android", "ios", "value"];
const lines = dynamic_array.map((value) => (
<Line
key={value}
name={value}
type="monotone"
dataKey={value}
stroke"#ff883c"
strokeWidth={2}
/>
));
return lines;
}
And then use the result of the method within the LineChart component, like this:
<LineChart width={500} height={300} data={this.state.android}>
<XAxis dataKey="Date"/>
<YAxis/>
<Tooltip />
<Legend />
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
{this.renderLines()}
</LineChart>

Remove Y Axis line but keep the values in recharts

So I have created this chart using recharts:
Is there a way to remove the YAxis line but keep the values visible? Like remove the line but keep 135, 190, etc.
<div className={styles.lineChart}>
<h3 className={styles.title}>Body Weight</h3>
<LineChart
width={800}
height={300}
data={props.data}
margin={{
top: 5, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="day" />
<YAxis />
<Tooltip />
<Legend layout="horizontal" verticalAlign="top" align="center"/>
<Line type="monotone" dataKey="body weight" stroke="#57c0e8" activeDot={{ r: 8 }} />
</LineChart>
</div>

To hide the YAxis line, you just need to use the props axisLine on the YAxis, and set it to false.
Like this:
<YAxis axisLine={false} />

Update: set tick to false
<XAxis tick={false} hide dataKey="name" />

How to add a custom svg as the line/tooltip for recharts

I have a line chart with two lines.
For one of the lines, I want to use a custom svg to represent it in the chart. See screenshot.
How can I do this?
Here's my code:
<LineChart
// width={800}
onClick={() => {}}
height={300}
data={this.state.data}
// margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<XAxis dataKey="to_char" />
<YAxis
tickFormatter={value => {
let val = value / 1000000;
return `$${new Intl.NumberFormat("en").format(val)}m`;
}}
/>
<CartesianGrid strokeDasharray="3" vertical={false} />
<Tooltip />
<Legend />
<Line
dot={false}
type="monotone"
dataKey="predictedprice"
stroke="#1C85E8"
activeDot={{ r: 8 }}
name="True Home Estimate™"
strokeWidth={3}
/>
<Line
type="monotone"
name="Sold Price"
dataKey="soldprice"
stroke="#82ca9d"
shape="star"
/>
</LineChart>

You should be able to add the shape property to ReferenceDot or ReferenceArea - I'm not sure if the shape properly can be used on regular properties, but here's a link I found to a GitHub conversation that talks more about this:
https://github.com/recharts/recharts/issues/922

Resources