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.
Related
I am doing a projets using Recharts for my study and I struggle with respecting the model
this is my current line chart
and I need to extend the line like this without affecting the days on the bottom/xAxis
I used padding on the xAxis but that affects the line, so it dosn't stay stick to the borders as expected.
This is my component :
function LineCharts() {
return (
<div className="bottom-cards">
<h2 id="session-time-h2">Durée moyenne des sessions</h2>
<ResponsiveContainer width="100%" aspect={1}>
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 100,
right: 0,
left: 0,
bottom: 20,
}}
onMouseMove={handleMouseMove}
>
<defs>
<linearGradient
id={gradientId}
x1="0"
y1="1"
x2="0"
y2="0"
gradientTransform="rotate(270)"
>
<stop
offset="1.19%"
stopColor="#FFFFFF"
stopOpacity={1}
/>
<stop
offset="81.27%"
stopColor="rgba(255, 255, 255, 0.403191)"
stopOpacity={1}
/>
</linearGradient>
</defs>
<XAxis
dataKey="name"
tickLine={false}
axisLine={false}
stroke="white"
opacity={0.5}
interval="preserveStartEnd"
padding={{ left: 20, right: 20 }}
/>
<Tooltip />
<Line
type="natural"
dataKey="value"
stroke={gradientUrl}
dot={false}
activeDot={{ stroke: "white", strokeWidth: 2 }}
/>
<ReferenceArea x1="60" x2="80" strokeOpacity={0.3} />
</LineChart>
</ResponsiveContainer>
</div>
);
}
export default LineCharts;
Hello I want to plot a graph on rechart library based on the data I have however I want it to be such that on the start of the x axis it labelled 12am (start of date) and end it is 11:59pm then using this I can plot a graph based on the events of the day
here is how my data looks like
const data=[{moneyIn: 100, time: '9:07 AM'}
{moneyIn: 140, time: '9:07 AM'}
{moneyIn: 250, time: '9:08 AM'}]
here is how I have plotted my current graph
<ResponsiveContainer width="99%" aspect={aspect}>
<AreaChart
width={730}
height={300}
data={data}
style
margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id="total" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.8} />
<stop offset="95%" stopColor={color} stopOpacity={0.3} />
</linearGradient>
</defs>
<XAxis dataKey={time} stroke="gray" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" className="chartGrid" />
<Tooltip />
<Area
type="monotone"
dataKey={moneyIn}
stroke={color}
fillOpacity={1}
fill="url(#total)"
/>
</AreaChart>
<ResponsiveContainer/>
this produces the folowing result
However i want the time to begin from 12am to 11:59pm then plot those points according to time, how do i do it? What other library can these be achieved in?
You can set the axes to a given value by providing the ticks attribute:
This thread on the Recharts Git discusses how.
<XAxis ticks={[1.2, 2.8, 4.4, 6]} />
You may want to have a few more ticks in your example, like 12-noon.
But you may have to format your x-axis values into a number or date value in order to make it work how you expect.
The XAxis Docs from Recharts give some good pointers on how certain props change the behaviour of the XAxis.
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:
I have an areachart with two areas and two Y-Axis. The first area goes from -1500 to 4500. The second goes from 0 to 100. Both areas start from the bottom so the 0 value of the second one is aligned with the -1500 value of the first one. Is it possible to align the two y-axis ?
<AreaChart width={730} height={250} data={data}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<defs>
<linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
<stop offset="{off}" stopColor="green" stopOpacity={1}/>
<stop offset="{off}" stopColor="red" stopOpacity={1}/>
</linearGradient>
</defs>
<XAxis dataKey="date" />
<YAxis yAxisId="left" dataKey="number" />
<YAxis yAxisId="right" orientation="right" dataKey="percentage" domain={[0,100]} unit="%" />
<Area yAxisId="left" dataKey="number" stroke="#8884d8" fill="url(#colorA)" />
<Area yAxisId="right" dataKey="percentage" stroke="#82ca9d" fill="#eee" />
</AreaChart>
I'm using Recharts to draw some charts. Depending on the length of the data array, the chart doesn't start at x = 0 (not at the intersection of x and y) and doesn't finish at the max value of x:
How can I force it to always begin at x = 0 and occupy all the x axis?
This is how I'm implementing it:
<ResponsiveContainer width="100%" height={400}>
<ComposedChart
data={chartContent.content.chart}
//data={data}
margin={{ top: 5, bottom: 5, left: 5 }}
>
<defs>
<linearGradient
id="colorBtc"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor="#ff9500"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="#ff9500"
stopOpacity={0}
/>
</linearGradient>
<linearGradient
id="colorStock"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor="#00a1e4"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="#00a1e4"
stopOpacity={0}
/>
</linearGradient>
</defs>
<XAxis
dataKey="date"
tickFormatter={formatDate}
/>
<YAxis tickFormatter={formatYAxis} />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip
formatter={formatTooltip}
labelFormatter={formatDate}
/>
<Legend />
<Area
name={t("Total amount in BTC")}
type="monotone"
dataKey="investment_total_btc"
stroke="#ff9500"
fillOpacity={1}
fill="url(#colorBtc)"
/>
<Area
name={`${t("Total amount in")} ${
chartContent.content.symbol
}`}
type="monotone"
dataKey="investment_total_stock"
stroke="#00a1e4"
fillOpacity={1}
fill="url(#colorStock)"
/>
<Line
name={t("Total invested in $")}
dataKey="invested"
type="monotone"
stroke="#ff0000"
dot={false}
/>
</ComposedChart>
</ResponsiveContainer>
Unfortunately the API documentation is not so clear and I couldn't find a solution.
Thanks in advance
What helped in my scenario was to add dataMax + 1 to the domain parameter of the XAxis component.
Based on what the documentation says I would have assumed that adding 'dataMin' for the first element of the domain array would help. However, it was dataMax + 1 that resolved it for me
Full snippet
<XAxis
dataKey="date"
name="Time"
type="number"
domain={["dataMin", "dataMax + 1"]}
tickFormatter={(tickItem) => moment(tickItem).format("MMM Do YY")}
/>
Adding domain={["dataMin", "dataMax + 1"]} doesn't work, since the XAxis type in my case is category(the default value).
According to the library API document, in order to set domain, the XAxis type should be "number"reference
For category type XAxis, I found that Priyank Kachhela pointed out an alternative solution. You can specify the scale of XAxis to be point( the default scale is band ). It resolved my issue.
<XAxis
dataKey="date"
tickFormatter={formatDate}
scale="point"
/>