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]}/>
Related
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>
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" />
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