i am using recharts plugin, all is good but i found a bug when is rendering AreaCharts.
In this case i want to render positive and negative values, i use stackOffset=sign to accumulate the negative and positive values on each side of the Y axis. But if the area with negative values, have some positive value, then at joining is adding white spaces.
Am i doing something wrong?
`<AreaChart data={args.chartData}
stackOffset="sign"
margin={{ top: 20, right: 10, left: -30, bottom: 0 }}>
<XAxis dataKey="month" />
<YAxis
width={80}
tick={args.customizedTick}
// ticks={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
interval={0}
domain={[1, 15]}
tickFormatter={args.tickFormatter}
/>
<CartesianGrid strokeDasharray="5 5" vertical="true" fill="#fafafa" horizontal={false}/>
<Tooltip content={args.renderTooltip} />
<Area stackId="1" type="monotone" dataKey="value" stroke={"red"} fillOpacity={0.1} fill={"red"} />
<Area stackId="1" type="monotone" dataKey="value2" stroke={"green"} fillOpacity={0.1} fill={"green"} />
<Area stackId="1" type="monotone" dataKey="score" stroke={"blue"} fillOpacity={0.1} fill={"blue"} />
</AreaChart>`
I have a scenario where you can reproduce and play with the plugin to see the weird behaviour
https://codesandbox.io/s/rechart-area-chart-forked-6xktp0?file=/index.js
Related
I've created a simple ReCharts - Line Chart with one data element (Date & Value). Chart is working fine but the tooltip only works when I run this on Firefox. The chart is unresponsive (or static) on Safari (v14.1.1) on a Mac.
<div className="card">
<LineChart width={950} height={300} data={this.props.inputdata} margin={{ top: 5, right: 20, bottom: 5, left: 20 }}>
<Line type="monotone" dataKey="Total_Returns_Index" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="Date" />
<YAxis domain={[500, 2000]} />
<Tooltip />
<Legend />
</LineChart>
</div>
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
<LineChart
width={400}
height={200}
data={data}
margin={{
top: 5, right: 30, left: 20,
}}
>
<CartesianGrid />
<XAxis dataKey="x" /* tick={false} *//>
<YAxis />
<Tooltip content={tooltipContent}/>
<Line type="monotone" dataKey="y" strokeWidth={1} dot={false} activeDot={{ r: 5 }} />
</LineChart>
my dataset includes just the decimal points(23.444,54.6665,..). I want to divide the axis into equal 10 halves (10,20,30,...100). How can I show these values on axis?
below is the image of the chart
[1]: https://i.stack.imgur.com/TatGP.png
To use custom values on the XAxis, or custom ticks, you need to use the following props on your XAxis component:
Specify the type of the values to number with type="number"
Supply the tick values ticks={[10, 20, 30, [...], 100]}
And the domain to specify the limits domain={[10, 100]}
In the end, your XAxis should look like this:
<XAxis
dataKey="x"
type="number"
ticks={[10, 20, 30, [...], 100]}
domain={[10, 100]}
/>
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 can I set the margin between X-Axis and the label (in my case 'dd.mm.yy' ?
That is my AreaChart:
<AreaChart
width={600}
height={400}
data={data}
connectNulls={true}
margin={{top: 20, left: 120, bottom: 20}}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#2198F3" stopOpacity={1}/>
<stop offset="95%" stopColor="#4BABF4" stopOpacity={0.6}/>
</linearGradient>
</defs>
<Area
dot={{ stroke: '#2196f3', strokeWidth: 4, r: 7, fill: 'white'}}
type='monotone'
dataKey='value'
stroke='#2196f3'
strokeWidth='4'
fill='url(#colorUv)'
/>
<XAxis dataKey="name" />
<YAxis orientation="right" />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
</AreaChart>
p.s. recharts-tag is not available!
Try using dx and dy properties on XAxid and YAxis like this:
<XAxis dataKey="name" dy={10}/>
or
<YAxis orientation="right" dx={5}/>
Based on these values, when the SVG is rendered and the positions of the ticks are calculated, the amount that you set for dx will be added to the normal amount of the X position of the tick item. So in the case of YAxis this will add a value of 10 the the x value of the text element that represents the tick. Same goes for dy
From the docs, the default offset for a label is 5. You need to set it to 0 or less for it to not overlap ticks.