so i have this data:
const systolicAndDiastolicAndPulseAverage = [
{
name:'Systolic Average',
style:'#FFDA83',
id:'right',
category:'Systolic Average',
data: [
{ day: '23/05/2020 04:50', value: 76 },
{ day: '24/05/2020 04:50', value: 98 },
{ day: '25/05/2020 04:50', value: 63 },
{ day: '26/05/2020 04:50', value: 112 },
{ day: '27/05/2020 04:50', value: 81 },
{ day: '28/05/2020 04:50', value: 81 },
{ day: '29/05/2020 04:50', value: 72 },
{ day: '30/05/2020 04:50', value: 74 },
{ day: '31/05/2020 04:50', value: 124 },
]
},
{
name:'Diastolic Average',
style:'#EA1D75',
id:'left',
category:'Diastolic Average',
data: [
{ day: '23/05/2020 04:50', value: 61 },
{ day: '24/05/2020 04:50', value: 65 },
{ day: '25/05/2020 04:50', value: 82 },
{ day: '26/05/2020 04:50', value: 74 },
{ day: '27/05/2020 04:50', value: 69 },
{ day: '28/05/2020 04:50', value: 59 },
{ day: '29/05/2020 04:50', value: 67 },
{ day: '30/05/2020 04:50', value: 71 },
{ day: '31/05/2020 04:50', value: 74 },
]
},
{
name:'Pulse Average',
style:'#5FE3A1',
category:'Pulse Average',
id:'right',
data: [
{ day: '23/05/2020 04:50', value: 80 },
{ day: '24/05/2020 04:50', value: 83 },
{ day: '25/05/2020 04:50', value: 65 },
{ day: '26/05/2020 04:50', value: 72 },
{ day: '27/05/2020 04:50', value: 79 },
{ day: '28/05/2020 04:50', value: 93 },
{ day: '29/05/2020 04:50', value: 96 },
{ day: '30/05/2020 04:50', value: 91 },
{ day: '31/05/2020 04:50', value: 46 },
]
}
]
i have successfully created a bar chart in recharts using this data and everything is great and working fine but my problem is that i want to take only the day and month out of the day and give it to the xaxis, i have looked up so many different documentations and github chats but nothing worked( for example on the xaxis it will only contain 30/05 31/05 ....) can anyone please help?
code:
<BarChart
width={1000}
height={300}
data={systolicAndDiastolicAndPulseAverage}
margin={{
top: 5, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="5 0" tickSize={15} />
<XAxis dataKey="day" type="number" tickFormatter={tickFormatter} scale='time'
domain = {['dataMin','dataMax']}
tickLine={false} axisLine={false} dx={-15} allowDuplicatedCategory={false}/>
<YAxis yAxisId="left" orientation="left" dataKey="value" type="number" tickLine={false} axisLine={false} allowDuplicatedCategory={false}/>
<YAxis yAxisId="right" orientation="right" dataKey="value" type="number" tickLine={false} axisLine={false} allowDuplicatedCategory={false}/>
<Tooltip />
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
systolicAndDiastolicAndPulseAverage.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{systolicAndDiastolicAndPulseAverage.map(s => (
<Bar yAxisId={s.id} barSize={10} dataKey="value" data={s.data} key={s.name} name={s.name} fill={s.style}/>
))}
</BarChart>
Related
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>
);
}
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>
I would like to style on row based on a certain props of one row, here is the code :
<MaterialTable
className="ciao"
title="One Detail Panel Preview"
columns={[
{title: "Icon", field: "icon"},
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Value', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa', 45: "Genova" },
},
]}
data={[
{ icon: <AccessAlarmIcon />,id:0, name: 'Andrea', surname: 'Castello', birthYear: 1987, birthCity: 63 },
{ id:1,name: 'Francesco', surname: 'Giostra', birthYear: 1987, birthCity: 63 },
{ id:2,name: 'Pietro', surname: 'Casa', birthYear: 1987, birthCity: 63 },
{ id:3,name: 'Giulio', surname: 'Villa', birthYear: 1987, birthCity: 34 },
{ id:4,name: 'Paolo', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ id:5,name: 'Mehmet', surname: 'Tazza', birthYear: 1987, birthCity: 45 },
]}
detailPanel={rowData => {
return (
<div>Ehi ciao</div>
)
}}
options={{
actionsColumnIndex: -1,
selection: true,
sorting: true,
rowStyle: {
background: 'linear-gradient(to right, #fdf32e 0%, #ffffff 2%)',
}
}}
onSelectionChange={(rows) => alert('You selected ' + rows.length + ' rows')}
/>
For example if the name is Pietro I want the background red.
Thanks for the help :D
options={{rowStyle: (rowData) => {
if(rowData.name === "Pietro") {
return {
backgroundColor: "red"
}
} else {
return {};
}
}}}
Old question but using the above would do it.
so basically i have this data:
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
coming from one component. and i'm drawing a rechart from another component like this:
<div className={styles.outer}>
<div className={styles.inner}>
<p className={styles.title}>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis yAxisId="right" tickLine={false} axisLine={false} dataKey="day" allowDuplicatedCategory={false} />
<YAxis tickCount={5} axisLine={false} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
props.data.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{props.data.map(s => (
<Line dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
the result is working great its drawing the data and everything, but what i'm stuck on is that i need two Y axis to be shown instead of just one which is present. i have looked it up but i don't know how to create it using .map can anyone help?
Here is how I did it.
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
export default function App() {
return (
<div >
<div >
<p>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis tickLine={false} axisLine={true} dataKey="day" allowDuplicatedCategory={false} />
<YAxis yAxisId="left" tickCount={5} dx={-15} dataKey="value"/>
<YAxis yAxisId="right" orientation="right" tickCount={5} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
bodyWeightAndFatData.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{bodyWeightAndFatData.map(s => (
<Line yAxisId="left" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
{bodyWeightAndFatData.map(s => (
<Line yAxisId="right" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
Two axis one on left and one on right.
I'm trying to create an multiline graph using chartjs.
On x-Axis I have dates and on y-Axis i have some amount in integers.
I have two lines, one of them for user's expenses and other for income.
For income I have data of only 2 dates but having difference of month. My second income point on the graph is not on the correct date, it comes on the next date of expenses.
My data looks like this :
[
{ date: '2020-02-24', type: 'income', amount: 900 },
{ date: '2020-03-20', type: 'expense', amount: 100 },
{ date: '2020-03-20', type: 'expense', amount: 830 },
{ date: '2020-03-21', type: 'expense', amount: 50 },
{ date: '2020-03-22', type: 'expense', amount: 560 },
{ date: '2020-03-24', type: 'expense', amount: 600 }
]
In labels dates of income are 2020-02-24 and 2020-03-24 and
rest of the dates are of expenses
Here is my dataset :
{
labels:[ "2020-02-24", "2020-03-20", "2020-03-20", "2020-03-21", "2020-03-22", "2020-03-24" ],
datasets: [
{
label: 'Expenses',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: [ 100, 830, 50, 560 ],
},
{
label: 'Income',
fill: false,
lineTension: 0.5,
backgroundColor: 'blue',
borderColor: 'red',
borderWidth: 2,
data: [ 900, 600 ],
}
]
};
You must not define data.labels, because they are considered for both datasets. Instead, you should define each data point individually using an object containing x and y properties.
data: [
{ x: '2020-02-24', y: 900 },
{ x: '2020-03-24', y: 600 }
]
In the following runnable code snippet, I build such data of individual datasets out of your base data array using filter() and map().
const data = [
{ date: '2020-02-24', type: 'income', amount: 900 },
{ date: '2020-03-15', type: 'expense', amount: 100 },
{ date: '2020-03-20', type: 'expense', amount: 830 },
{ date: '2020-03-25', type: 'expense', amount: 50 },
{ date: '2020-03-28', type: 'expense', amount: 560 },
{ date: '2020-03-24', type: 'income', amount: 600 }
];
var worldChart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [
{
label: 'Expenses',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: data.filter(o => o.type == 'expense').map(o => ({ x: o.date, y: o.amount }))
},
{
label: 'Income',
fill: false,
lineTension: 0.5,
backgroundColor: 'blue',
borderColor: 'red',
borderWidth: 2,
data: data.filter(o => o.type == 'income').map(o => ({ x: o.date, y: o.amount }))
}
]
},
options: {
responsive: true,
title: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: { title: { display: false, }, ticks: { color: "black", }, },
x: { ticks: { color: "black", autoSkip: true, }, grid: { display: false, } },
},
plugins: { legend: { display: false, }, title: { display: false, }, tooltip: { mode: "index", intersect: false, }, },
hover: { mode: "nearest", intersect: false, },
};
const data={{
labels: chartData?.labels,
datasets: [{ label: "Orders", type: "bar", barThickness: 12, borderRadius: 20, data: chartData?.data, backgroundColor: "#fb6340", },],
}}