I have been trying to display data from server on multiple y axes scatter chart. I am receiving it filtered for the past 24 hours, but I am struggling to display it properly because for example single item is created in 23:01 and I need to position it between ticks 23 and 00 on the X-axis.
The following code is example for the past 4 hours, because on this sensor I still don't have data recorded for the past 24 hours:
The code I have created
<ResponsiveContainer width="100%" height="100%">
<ScatterChart
width={500}
height={400}
margin={{
top: 10,
right: 10,
bottom: 10,
left: 20,
}}
>
<CartesianGrid />
<XAxis
dataKey='created'
domain={['auto', 'auto']}
name='created'
tickFormatter={(unixTime) => moment(unixTime).format('HH')}
type='number'
/>
<YAxis yAxisId="left" type="number" dataKey="humidity" name="humidity" unit="%" stroke="#8884d8" />
<YAxis
yAxisId="right"
type="number"
dataKey="temperature"
name="temperature"
unit="°"
orientation="right"
stroke="#82ca9d"
/>
<Tooltip
cursor={{ strokeDasharray: '3 3', }}
formatter={(value: any, name: any, props: any) => {
if (name === 'created') {
return moment(value).format('HH:mm');
} else {
return value;
}
}}
/>
<Scatter yAxisId="left" name="A school" data={data} fill="#8884d8" />
<Scatter yAxisId="right" name="A school" data={data} fill="#82ca9d" />
</ScatterChart>
</ResponsiveContainer>
The data is coming in array of objects:
[
{
created: 1631199180006,
humidity: 9,
idStation: 3,
name: "Sofia"
status: "active"
temperature: 27
}
]
My question is how configure the ticks of the X-Axis to be positioned properly. I have read several posts and in my opinion I should create custom ticks but would be very grateful if someone gives ideas
Related
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 trying to create a Stacked Bar from Recharts but I get the title error. The thing here is that locally in a separate React project is working properly but when I try to implement it in a legacy code is shows this error. Does it have any connection with the implementation or is there any obvious error in my code?
My data are:
Values: [
{ Other: 1000,
Client: 40,
period: "2021"
transactions: 10
},
{ Other: 4000,
Client: 10,
period: "2021"
transactions: 30
},
{ Other: 10500,
Client: 20,
period: "2021"
transactions: 40
}
]
And my component is like this:
<ComposedChart
data={mappedValues}
margin={{
top: 20,
right: 80,
bottom: 20,
left: 20,
}}
>
<CartesianGrid stroke="#EBF0FA" vertical={false} />
<XAxis
dataKey="periodFixed"
axisLine={false}
tickLine={false}
tick={<CustomizedAxisTick />}
/>
<YAxis
yAxisId="left"
axisLine={false}
tickLine={false}
tickFormatter={formatYAxis}
stroke="rgba(99, 110, 131, 0.5)"
/>
<YAxis
yAxisId="right"
orientation="right"
axisLine={false}
tickLine={false}
stroke="rgba(99, 110, 131, 0.5)"
/>
<Tooltip />
{legendFlag ? (
<Legend
wrapperStyle={{
paddingTop: "25px",
paddingLeft: "10px",
}}
/>
) : null}
/* the below part with the stacked bars is throwing the error */
<Bar dataKey="Client" stackId="a" fill="#23AC70" />
<Bar dataKey="Others" stackId="a" fill="#003972" />
<Line
type="linear"
yAxisId="right"
dataKey="transactions"
stroke="#ADD868"
dot={false}
/>
</ComposedChart>
Any idea what is happening?
I have an array of data with the following structure:
0:
date: '01-12-2020',
data: Array(2)
{name: "plants", count: 5}
{name: "water", count: 2}
1:
date: '02-12-2020',
data: Array(2)
{name: "plants", count: 1}
{name: "water", count: 4}
...
I would like to show the dates on the x-axis and render a line for each `name' category. In this case two lines, one for plants and one for water.
Should I format this code or can I use this array directly in recharts? I'm creating the array myself in the backend so I can also format it there.
I've tried something like this but it is not working:
<ResponsiveContainer width="100%" height={200}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x" />
<YAxis />
<Tooltip />
{data.map((item, i) => (
<Line
dataKey={data[0].data[0].count}
type="monotone"
stroke={colors[0]}
activeDot={{ r: 8 }}
/>
))}
</LineChart>
</ResponsiveContainer>
Your data needs to be formatted into this :
[{name: '01-12-2020',
plants: 5
water : 4}]
you can do as following :
let result = [];
data.map(entry) => {
let obj = {date: entry.date}
entry.data.map((entry1) => {
obj[entry1.name] = entry1.count;
});
result.push(obj)
})
and your chart as following (your dataKey on XAxis is false)
<ChartContainer>
<ResponsiveContainer>
<LineChart
width={500}
height={300}
style={{ color: scoopBlue }}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<Legend />
<Line
type="monotone"
dataKey="plants"
stroke={scoopBlue}
strokeWidth={2}
activeDot={{ r: 5 }}
/>
<Line
type="monotone"
dataKey="water"
stroke={"orange"}
strokeWidth={2}
activeDot={{ r: 5 }}
/>
</LineChart>
</ResponsiveContainer>
</ChartContainer>
<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]}
/>
I'am using React Recharts (http://recharts.org/en-US/) to show some chart data and I need to show formatted values nearby axis. Axis values is separated by spaces, for example 1 000 000 $. React Recharts is breaking values into separate lines
How to prevent breaking labels and show it fully at the same line?
Have you tried using a tick formatter? I tried to reproduce your problem but it couldn't.
Here is a re-purposed chart that is working just fine for me.
<ResponsiveContainer height={400} width="100%">
<ComposedChart
height={400}
width="100%"
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
>
<CartesianGrid />
<XAxis dataKey="name" />
<YAxis
unit="$"
dataKey="y"
tickFormatter={val => val.toLocaleString().replace(/,/g, " ")}
/>
<Scatter
name="A school"
data={[
{ name: "Jill", y: 3000000 },
{ name: "Eve", y: 5000000 },
{ name: "Audrey", y: 1000000 },
{ name: "Jaqueline", y: 7000000 }
]}
fill="#8884d8"
/>
<Tooltip />
</ComposedChart>
</ResponsiveContainer>
Let me know if misunderstood your question.
You can specify the width for tick
For example,
<YAxis tick={{ width: 75 }} tickFormatter={formatter} domain={yDomain} allowDataOverflow/>