<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]}
/>
Related
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
I'm trying to add color to parts of a Rechart plot (based on a value in the data). The chart that I'm trying to recreate is shown below. Here is my code currently which just plots the chart with one color https://codesandbox.io/s/stupefied-shamir-e1u0vt?file=/src/App.js.
I tried using linearGradient in the way shown below (commented) but that seems to gives 2 colors (red if above a certain y value and green if below).
The data format:
>>> data = [{X: 100, Y: 200, Speed: 0},{X: 200, Y: 200, Speed: 1},{X: 300, Y: 400, Speed: 3}]
Current Recharts Code:
<LineChart
width={600}
height={300}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
data={data}
>
{/* <defs>
<linearGradient id="colorSpeed" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="red" />
<stop offset="100%" stopColor="green" />
</linearGradient>
</defs> */}
<Line dot={false} type="monotype" dataKey="Y"
// stroke="url(#colorSpeed)"
/>
<XAxis type="number" dataKey="X" domain={["auto", "auto"]} />
<YAxis domain={("auto", "auto")} />
<Tooltip />
<Legend />
</LineChart>
What I'm trying to recreate:
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
I tried to configurate my ComposedChar, but XAxis is always dynamic.
for XAxis I have data in minutes, from 0-60.
Is it possible to set is as 0, 10, 20...60.
Maybe somebody know, please help.
Thanks in advance.
My code is bellow:
<ComposedChart
width={1240}
height={600}
data={validDate}
margin={{ top: 70, right: 20, bottom: 40, left: 20 }}>
<XAxis dataKey='name' />
<YAxis />
<Tooltip />
<CartesianGrid stroke='#f5f5f5' />
<Bar dataKey='time' barSize={30} fill='#413ea0' />
<Line type='monotone' dataKey='time' stroke='#ff7300' />
</ComposedChart>
Picture for better understanding
Try This: <XAxis tickCount={7} domain={[0, 60]}/>