I can't get target graphic with recharts library - reactjs

I am here because I am trying to build a chart using recharts library and after many different attempts to get the desired result I still do not get it.
My target graphic should look similar to this:
I tried many different things like bar charts, stacked bar charts, composed charts, error bars, etc and I can't get my desired result.
The closest result I get so far is this:
But in the moment I try to align the black bars on top of the orange ones (with the stackId prop) I get this:
Does someone know if I can get the graphic I want with this library? Any help would be appreciated.
The code of the second graphic is this:
const customData = [
{ name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<ComposedChart width={400} height={400} data={customData}>
<XAxis />
<YAxis />
<Bar dataKey="uv" fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
</Bar>
<Bar dataKey="pv">
</Bar>
</ComposedChart>
</div>
);
}
}
The code of the third graphic is the same but I add the prop stackId="0" to both bars.
Thanks in advance to anyone that can help me.

Finally I found the solution by my self.
While googling the web I found this Rechart's issue which linked me to this other one. There I found a jsfiddle demo, with that code and a few changes I got the result I wanted.
This is the final result:
And this is the code:
const data = [
{ name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis xAxisId={0} />
<XAxis xAxisId={1} hide/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Bar dataKey="uv" xAxisId={1} fill="#000" />
<Bar dataKey="pv" xAxisId={0} fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
</Bar>
</BarChart>
</div>
);
}
}
I hope this helps someone else too.
Thanks !

Related

Unequal Y Axis Point in Recharts Library of React.js

I wants to know that if there is any way to plot unequal scale of Y Axis in the Recharts Library of React.js
Like in the example in the image
Link for the image: https://i.stack.imgur.com/ZyF49.png
it is an example of Stacked Bar Charts
Area of all the bars will be same but their values on y axis will be different
like for red it will be 0 - 70
yellow 70 - 80
lightgreen 80 - 90
green 90 - 100
but their height should be same only their value will be different
const data = [
{
name: "Page A",
uv: 10
},
{
name: "Page B",
uv: 20
},
{
name: "Page C",
uv: 30
},
{
name: "Page D",
uv: 40
},
{
name: "Page E",
uv: 50
},
{
name: "Page F",
uv: 60
},
{
name: "Page G",
uv: 70
},
{
name: "Page H",
uv: 80
},
{
name: "Page I",
uv: 90
},
{
name: "Page J",
uv: 100
}
];
export default function App() {
return (
<ComposedChart
width={500}
height={400}
data={data}
>
<CartesianGrid stroke="#f5f5f5" />
<XAxis dataKey="name" scale="band" />
<YAxis domain={[0,100]} />
<Tooltip />
<Legend />
<Bar dataKey="uv" barSize={20} fill="#413ea0" />
</ComposedChart>
);
}

Use date on x-axis but id to set domain using recharts

I want to set the domain for the giving data set. So you can only see 5 objects at once. When doing this using ids it works well. However the x-axis uses dates. Is there a way to decouple the x-axis labels from the domain?
const initialData = [
{ id: 1, date: "05/16/2022", value: 4456 },
{ id: 2, date: "05/17/2022", value: 2789 },
{ id: 3, date: "05/18/2022", value: 7891 },
{ id: 4, date: "05/19/2022", value: 4561 },
{ id: 5, date: "05/20/2022", value: 5561 },
{ id: 6, date: "05/21/2022", value: 6561 },
{ id: 7, date: "05/22/2022", value: 4561 },
{ id: 8, date: "05/23/2022", value: 4561 },
{ id: 9, date: "05/24/2022", value: 4861 },
{ id: 10, date: "05/25/2022", value: 8561 },
{ id: 11, date: "05/26/2022", value: 6561 },
{ id: 12, date: "05/27/2022", value: 4561 }
];
const initialState = {
data: initialData,
left: initialData[0].date,
right: initialData[5].date,
refAreaLeft: undefined,
refAreaRight: undefined,
top: "dataMax+1000",
bottom: "dataMin-1000",
animation: true
};
<ResponsiveContainer width="100%" height={400}>
<LineChart
width={800}
height={400}
data={data}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
allowDataOverflow
dataKey="date"
domain={[left, right]}
type="category"
/>
<YAxis allowDataOverflow domain={[bottom, top]} type="number" />
<Tooltip />
<Line
type="natural"
dataKey="value"
stroke="#8884d8"
animationDuration={300}
/>
</LineChart>
</ResponsiveContainer>

Recharts Customized XAxis name

I am just getting started learning React and React Native for Web these days. I tried to make a LineChart by using Recharts Library. I expected that the all XAxis name should be shown in the graph; 10시, 11시 ... 24시.
This is my LineData. name is XAsis label name and UV is its value.
let lineData = [
{ name: "10시", uv: 44 },
{ name: "11시", uv: 32 },
{ name: "12시", uv: 14 },
{ name: "13시", uv: 14 },
{ name: "14시", uv: 14 },
{ name: "15시", uv: 34 },
{ name: "16시", uv: 4 },
{ name: "17시", uv: 54 },
{ name: "18시", uv: 14 },
{ name: "19시", uv: 0 },
{ name: "20시", uv: 34 },
{ name: "21시", uv: 54 },
{ name: "22시", uv: 14 },
{ name: "23시", uv: 24 },
{ name: "24시", uv: 34 },
];
In the Linechart I am using ResponsiveContainer, XAsis, and YAxis for customizing the graph.
This is my code
<ResponsiveContainer width="100%" height={250}>
<LineChart
data={lineData}
margin={{ top: 20, right: 0, left: -15, bottom: 5 }}
>
<Line type="monotone" dataKey="uv" stroke="red" />
<XAxis
dataKey="name"
tick={{ fontSize: 10 }}
// width="-100"
// ticks={[
// 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
// ]}
// domain={[10, 24]}
/>
<YAxis tick={{ fontSize: 10 }} ticks={[0, 10, 20, 30, 40]} />
</LineChart>
</ResponsiveContainer>
What I mentioned above, the XAsis name should be shown in the graph all of them but part of name only show like this.
10시, 12시, 14시, 16시, 18시, 20시, 22시, 23시 are disapeared.
Could you help me with what part do I missing or wrong?
I would be really appreciated your help!
I think because you set the width 100% for ResponsiveContainer and you are rendering this graph in narrow screen, Recharts automatically cut some x-axis values.
Have you tried adding interval props for XAxis?
If you set interval={0} in XAxis component, you can see all the x-axis values in the screen even it is not wide enough.
<XAxis
dataKey="name"
tick={{ fontSize: 10 }}
interval={0}
/>

React Recharts - How to add filters for line graph?

In nextjs application, I am trying to add recharts https://recharts.org/en-US/examples/SimpleLineChart. Now I want to add filter option for the charts like 1 day, 1 week, 1 month, etc. How can I customise the graph? Or can I use different plugin which supports my requirement? please suggest me. Also how can I add time and date 02:30pm 10 01, 2021 to data? and that should display in when mouseHover on the graph(edges).
Right now I have tried sample graph with static data like
const data = [
{
name: 'Page A',
uv: 4000,
pv: 2400,
amt: 2400,
},
{
name: 'Page B',
uv: 3000,
pv: 1398,
amt: 2210,
},
{
name: 'Page C',
uv: 2000,
pv: 9800,
amt: 2290,
},
]
return(
<LineChart
width={900}
height={250}
data={data}
margin={{
top: 35,
right: 30,
left: 20,
bottom: 5,
}}
>
<Tooltip />
<Legend />
<Line type="monotone" dataKey="uv" stroke="#4ec6f4" activeDot={{ r: 8 }} />
</LineChart>
)
Also how to add custom content for Tooltip?
For your question regarding Tooltip,
<Tooltip formatter={(n) => ${n} months}/>
As far as I am aware, Recharts does not provide a way to filter your data. I would recommend writing a function that filters your data before you pass it to the chart. You can actually just add a date property to all of your data items. I would do some research to find a date string format that suits your needs and is understood by the Javascript Date class.
browse here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Then you can work with your dates as Date objectsand perform logic on them: How to check if one DateTime is later than another in javascript

Adding labels to both ends of axis google charts

I've built a bubble chart on quadrant graph using google-charts in reactjs but I can only had two labels on my axis and I need four.
I've tried fiddling with the code but unsuccessfully. I don't want to append dummy data and additional series elements. Is overlay the only option to add axis?
<Chart
width={"800px"}
height={"600px"}
chartType="BubbleChart"
loader={<div>Loading Chart</div>}
data={[
["Age", "Weight", "4", "Group", "Size"],
["Name", -12, 34, 1, 7],
["Name", -5.5, 6, 1, 8],
["Name", 22, 35, 1, 4],
["Name", 14, 4, 2, 5],
["Name", -5, -5, 2, 6],
["Name", 15, 34, 3, 1],
["Name4", 7, -21, 4, 22]
]}
options={{
bubble: {},
chartArea: { left: 20, top: 0, width: "90%", height: "95%" },
colors: ["red", "green", "yellow", "blue"],
hAxis: {
title: "Low Importance",
ticks: "none",
baseline: 0,
ticks: ["none"],
minValue: -50,
gridlines: { count: 0 },
maxValue: 50
},
vAxis: {
title: "Low Urgency",
baseline: 0,
ticks: ["none"],
minValue: -50,
gridlines: { count: 0 },
maxValue: 50
},
legend: "none"
}}
/>;
As you can see in the graph below, I can only get left and bottom labels but not top and right. Any ideas how I could achieve that using google-chart library for reactjs?

Resources