I was wondering If someone could help me design something like this using Recharts:
I have something simillar:
I tried to add more Axis, I modified the position of the bars, I put a padding but nothing works
Here is my code:
<BarChart
barGap={-55}
data={data}
height={300}
margin={{ top: 30, left: -15, right: 5, bottom: 20 }}
width={100}
>
<pattern height='8' id='pattern-stripe' patternTransform='rotate(45)' patternUnits='userSpaceOnUse' width='8'>
<rect fill='white' height='8' transform='translate(0,0)' width='4' />
</pattern>
<mask id='mask-stripe'>
<rect fill='url(#pattern-stripe)' height='100%' width='100%' x='0' y='0' />
</mask>
<CartesianGrid vertical={false} />
<XAxis dataKey='period' xAxisId={0} hide />
<XAxis allowDuplicatedCategory={false} dataKey='period' tickLine={false} xAxisId={1}>
{groupName && (
<ChartLabel position='insideBottomRight' style={{ transform: 'translateY(1rem)' }} value={groupName} />
)}
</XAxis>
<YAxis name={t('conceptionRate')} type='number'>
<ChartLabel
position='right'
style={{ transform: 'translateY(-45%)' }}
value={`${t('Rate')} (%)`}
/>
</YAxis>
<Tooltip content={<ReproductionTooltip />} cursor={{ fill: 'rgba(0, 0, 0, 0.1)' }} />
<ReferenceLine stroke={WUZZY} strokeDasharray='3 3' y={referenceValue} />
<Bar barSize={100} dataKey='bar' fill={GREEN} shape={<HashedBar />} xAxisId={1} />
<Bar barSize={100} dataKey='reference' fill={BLUE} shape={<HashedBar />} xAxisId={0} />
<Bar barSize={10} dataKey='labelList' fill={DARK_GRAY} xAxisId={0} />
</BarChart>
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;
I want to show this percentage after the bar chart. I have made this with react recharts
Check photo
<BarChart
width={window.innerWidth < 900 ? 280 : 380}
height={200}
data={data}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
layout='vertical'
>
{/* <CartesianGrid strokeDasharray="3 3" /> */}
<XAxis type='number' tick={false} axisLine={false} />
<YAxis type='category' dataKey='name' width={window.innerWidth < 900 ? 110 : 120}
stroke="#fff" style={{ fontSize: '14px' }} />
<Bar dataKey="pv" stackId="a" fill="#4EDCF0" />
</BarChart>
You can use cutom tooltips to write your own logic to show percentage
Working example if u want to take a look - https://codesandbox.io/s/epic-cache-kx8ze2?file=/src/App.js
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip content={<CustomTooltip />} />
<Legend />
<Bar dataKey="amt" barSize={20} fill="#8884d8" />
</BarChart>
Custom tooltip
const CustomTooltip = ({ active, payload, label }: any) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<p> percentage : {percentage (payload)}</p>
</div>
);
}
return null;
};
the function to calculate the percentage
const percentage = (data)=>{
console.log(data[0].value);
const total = 10000
const calcualtion = (data[0].value/total) * 100 // total to be replaced by the totla value
return calcualtion
}
hope it helps
I am using recharts to display a composite chart.
const Chart = ({ responseAverage }) => {
responseAverage = responseAverage.sort((a, b) => a.label - b.label);
return (
<ResponsiveContainer width={700} height={400}>
<ComposedChart
data={responseAverage}
>
<CartesianGrid horizontal={false} strokeDasharray="4 4" />
<XAxis scale="point" dataKey="label" />
<YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} height={20} />
{/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
<Bar dataKey="count" barSize={40} fill="#AAE5F9" />
<Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
{/* <LabelList dataKey="name" position="insideTop" /> */}
</ComposedChart>
</ResponsiveContainer>
);
};
In this I am specifying the barSize. But it dosent work in all cases. I want the Bar size to calculate automatically based on the number of values
Is there any workaround for this problem ?
Any help would be really thankfull
If you want to remove the gaps between the bars, you need to remove the barSize parameter from the Bar and add the barCategoryGap={0} parameter to the ComposedChart component.
const Chart = ({ responseAverage }) => {
responseAverage = responseAverage.sort((a, b) => a.label - b.label);
return (
<ResponsiveContainer width={700} height={400}>
<ComposedChart
barCategoryGap={0}
data={responseAverage}
>
<CartesianGrid horizontal={false} strokeDasharray="4 4" />
<XAxis scale="point" dataKey="label" />
<YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} height={20} />
{/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
<Bar dataKey="count" fill="#AAE5F9" />
<Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
{/* <LabelList dataKey="name" position="insideTop" /> */}
</ComposedChart>
</ResponsiveContainer>
);
};
If as a result, thin lines remain between the bars, then you can do this:
<Bar dataKey="count" fill="#AAE5F9" stroke="#AAE5F9" strokeWidth={2} />
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