Recently started using Recharts for charting. Here is the data that comes from the server. They need to display Barchart.
[
{
"channel_number": 1,
"data": [
{
"date": 100000,
"consumption": 1231
},
{
"date": 200000,
"consumption": 1234
},
{
"date": 300000,
"consumption": 1234
}
]
},
{
"channel_number": 2,
"data": [
{
"date": 100000,
"consumption": 800
},
{
"date": 200000,
"consumption": 823
},
{
"date": 300000,
"consumption": 1233
}
]
}
]
I need to display each consumption value on the y-axis. That is, so that when hovering over with the mouse, it shows each value. Like this for example
I get a tooltip where only the total value of consumption is displayed
My code:
<ResponsiveContainer width="100%" height={385}>
<BarChart height={300} data={newBar}>
<CartesianGrid vertical={false} />
<XAxis
height={32}
dataKey="date"
allowDuplicatedCategory={false}
tickFormatter={(tick) => convertTimestampToDate(tick, 'dd.MM')}
angle={90}
tick={{ fontSize: '12px', color: '#626C77' }}
textAnchor="start"
/>
<YAxis tick={{ fontSize: '12px', color: '#626C77' }} />
<Tooltip cursor={false} labelFormatter={() => ''} />
<Legend
align="right"
verticalAlign="top"
iconSize={6}
formatter={(value, entry, index) => (
<span style={{ color: '#969FA8' }}>{value}</span>
)}
wrapperStyle={{ fontSize: '12px', top: -51 }}
payload={data?.channel_consumption.map((item: any, index: any) => ({
id: item.channel_number,
value: `${item.id_channel}`,
color: PIE_COLORS[index],
}))}
/>
{newBar.map((el: any, index: any) => (
<Bar
dataKey="consumption"
data={el.data}
key={el.channel_number}
fill={PIE_COLORS[index]}
barSize={8}
radius={71.5}
></Bar>
))}
</BarChart>
</ResponsiveContainer>
Does anyone have any ideas? How to display each value when hovering over a bar? Probably do something with the coordinates, I can't figure it out