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>
Related
I am looking for a way to display month numbers in such a way as seen below for a line chart using Recharts library:
As you can see, the chart starts with the first month of each year for 4 years of total data in the x-axis and the month increments by 2 for each year. Each year has a reference line, with the thicker stroke referenceline being the current year and month followed by future months including the next year first month as displayed.
How can I display the ticks on the x-axis along with the month numbers for each year which is denoted with the reference lines (except the beginning of the line chart should not have a reference line)? I am new to react and also to recharts so bear with me. Below is the code I have so far in the recharts components which only takes into account the year at the reference lines as a placeholder:
<ResponsiveContainer height="500px" width="99%" aspect={4}>
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid
vertical={false}
opacity="0.4"
/>
<XAxis
dataKey="name"
tickSize={4}
/>
<YAxis
type="number"
domain={[0, 20000]}
/>
<Tooltip
content={CustomTooltip}
/>
{on1 &&
<Line type="monotone"
dataKey="cv"
stroke="#BE1710"
strokeWidth={2}
isAnimationActive={false}
dot={{r:0}}
/>
}
{on2 &&
<Line type="monotone"
dataKey="uv"
stroke="#22766F"
strokeWidth={2}
isAnimationActive={false}
dot={{r:0}}
/>
}
{on3 &&
<Line type="monotone"
dataKey="pv"
stroke="#0E65BC"
strokeWidth={2}
isAnimationActive={false}
dot={{r:0}}
/>
}
<ReferenceLine
x="2021"
stroke="black"
strokeWidth={1}
/>
<ReferenceLine x="2020" strokeWidth={0.5}/>
<ReferenceLine x="2019" strokeWidth={0.5}/>
<ReferenceLine x="2018" strokeWidth={0.5} />
</LineChart>
</ResponsiveContainer>
It seems to me that you want a ReferenceLine every 12 months (or ticks), rather than a ReferenceLine on a specific year.
Assuming that your data array has one value per month of each year, you could have your LineChart this way:
export default function App() {
return (
<ResponsiveContainer height="500px" width="99%" aspect={4}>
<LineChart
width={1000}
height={500}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid vertical={false} opacity="0.4" />
<XAxis
dataKey="month"
domain={[0, "dataMax"]}
tickSize={4}
interval={1}
/>
<YAxis type="number" domain={[0, 20000]} />
<Line
type="monotone"
dataKey="cv"
stroke="#BE1710"
strokeWidth={2}
isAnimationActive={false}
dot={{ r: 0 }}
/>
<Line
type="monotone"
dataKey="uv"
stroke="#22766F"
strokeWidth={2}
isAnimationActive={false}
dot={{ r: 0 }}
/>
<Line
type="monotone"
dataKey="pv"
stroke="#0E65BC"
strokeWidth={2}
isAnimationActive={false}
dot={{ r: 0 }}
/>
<ReferenceLine x="0" strokeWidth={0.5} />
<ReferenceLine x="12" strokeWidth={0.5} />
<ReferenceLine x="24" stroke="black" strokeWidth={1} />
<ReferenceLine x="36" strokeWidth={0.5} />
</LineChart>
</ResponsiveContainer>
);
}
Here, the ReferenceLine x's value is hardcoded, where the value given is associated to the first month (1) of the year.
I did that assuming that your data array contained elements such as the following:
{
month: 9,
year: 2020,
uv: 3490,
pv: 4300,
cv: 2100
}
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
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>
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" />
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