How to position tooltip on the top of a barchart in rechart? - css

Question

Problem:
I have created a bar chart with a custom tooltip. Now What I need is to position tooltip on top of the bar not within the area of the chart. Like in this picture.
This is how It looks like now.
Here I am providing how I organize my code.
import React, { Component } from "react";
import {
BarChart,
Tooltip,
Bar,
Legend,
ResponsiveContainer,
Cell
} from "recharts";
import { Card, CardTitle, CardBody } from "reactstrap";
import "./SessionDuration.css";
const colors = ["#26a0a7", "#79d69f", "#f9ec86", "#ec983d"];
const data = [
{
name: "Page A",
pv: 2400,
amt: 2400
},
{
name: "Page B",
pv: 1398,
amt: 2210
},
{
name: "Page C",
pv: 9800,
amt: 2290
},
{
name: "Page D",
pv: 3908,
amt: 2000
}
];
const getTitleOfTooltip = (label) =>{
if (label === 0) {
return "<=5 min";
}
if (label === 1) {
return "5-30 min";
}
if (label === 2) {
return "30-60 min";
}
if (label === 3) {
return ">60";
}
}
const getIntroOfPage = label => {
if (label === 0) {
return "Page A is about men's clothing";
}
if (label === 1) {
return "Page B is about women's dress";
}
if (label === 2) {
return "Page C is about women's bag";
}
if (label === 3) {
return "Page D is about household goods";
}
};
class SessionDuration extends Component {
render() {
return (
<Card className="session-duration-card">
<CardTitle className="session-duration-card-header">
Session Duration
</CardTitle>
<CardBody>
<ResponsiveContainer width="100%" height="100%" aspect={4.0 / 5.5}>
<BarChart
data={data}
margin={{
top: 3,
right: 5,
left: 5,
bottom: 13
}}
barGap={10}
>
<Tooltip
coordinate={{ x: 0, y: 150 }}
content={<CustomTooltip />}
/>
<Bar dataKey="pv" fill="#8884d8">
{data.map((entry, index) => (
<Cell key={`cell-${index + 1}`} fill={colors[index]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</CardBody>
</Card>
);
}
}
export default SessionDuration;
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="session-duration-tooltip">
<p className="session-duration-tooltip-label">{getTitleOfTooltip(label)}</p>
<p className="session-duration-tooltip-intro">
{getIntroOfPage(label)}
</p>
<p className="session-duration-tooltip-desc">
Anything you want can be displayed here.
</p>
</div>
);
}
return null;
};
Here I am providing my CSS file.
#media only screen and (min-width: 1024px) {
.session-duration-card {
margin-top: 14.5%;
margin-left: -44%;
width: 190% !important;
border-radius: none !important;
height: 86%
}
.session-duration-card-header {
font-weight: 700;
text-align: left;
padding-left: 6%
}
.session-duration-tooltip {
width: 210%;
}
.session-duration-tooltip-label {
font-weight: 700;
font-size: 11px;
}
}
#media only screen and (min-width: 308px) and (max-width: 1024px) {
.session-duration-card {
margin-top: 5%;
margin-left: 3.2%;
width: 94.5%;
border-radius: none !important;
}
.session-duration-card-header {
font-weight: 700;
text-align: center;
}
}
#media only screen and (min-width: 1666px) {
.session-duration-card {
margin-top: 11%;
margin-left: -13%;
width: 190% !important;
height: 97%;
border-radius: none !important;
}
.session-duration-card-header {
font-weight: 700;
text-align: center;
}
}
I tried a lot to find a solution for my problem but I was unable to get it done can someone help me by modifying my code to get this work done. Thank you very much.

Answer 1

To solve this problem, will need to get the height and width of each bar and tooltip.
Need two functions onMouseMove and onMouseOut to get the height
and width of the Bar component.
Using useState to get and keep the height and width to the state, also place extra boolean to the state, to handle when the mouse is outside of the Bar. (So, to function we add object with two paramets data and boolean ).
In the Tooltip component, set the position object for static values X, Y and using the state values, set the height and width.
Using useEffect, to find the .recharts-tooltip-wrapper class, to define the height and width of the DOM element.
Set styles for .recharts-tooltip-wrapper. (Rechart. js in .recharts-tooltip-wrapper has its own generated style, we need to keep some static style of the .recharts-tooltip-wrapper and add our).
SessionDuration.js
import React, { useState, useEffect } from 'react';
import { BarChart, Tooltip, Bar, ResponsiveContainer, Cell } from 'recharts';
import { Card, CardTitle, CardBody } from 'reactstrap';
import './SessionDuration.css';
const colors = ['#26a0a7', '#79d69f', '#f9ec86', '#ec983d'];
const data = [
{
name: 'Page A',
pv: 2400,
amt: 2400,
},
{
name: 'Page B',
pv: 1398,
amt: 2210,
},
{
name: 'Page C',
pv: 9800,
amt: 2290,
},
{
name: 'Page D',
pv: 3908,
amt: 2000,
},
];
const getTitleOfTooltip = label => {
if (label === 0) {
return '<=5 min';
}
if (label === 1) {
return '5-30 min';
}
if (label === 2) {
return '30-60 min';
}
if (label === 3) {
return '>60';
}
};
const getIntroOfPage = label => {
if (label === 0) {
return "Page A is about men's clothing";
}
if (label === 1) {
return "Page B is about women's dress";
}
if (label === 2) {
return "Page C is about women's bag";
}
if (label === 3) {
return 'Page D is about household goods';
}
};
export const SessionDuration = () => {
const [position, setPosition] = useState(null);
useEffect(() => {
const tooltip = document.querySelector('.recharts-tooltip-wrapper');
if (!tooltip) return;
// Init tooltip values
const tooltipHeight = tooltip.getBoundingClientRect().height;
const tooltipWidth = tooltip.getBoundingClientRect().width;
const spaceForLittleTriangle = 10;
// Rewrite tooltip styles
tooltip.style = `
transform: translate(${position?.data.x}px, ${position?.data.y}px);
pointer-events: none; position: absolute;
top: -${tooltipHeight + spaceForLittleTriangle}px;
left: -${tooltipWidth / 2 - position?.data.width / 2}px;
opacity: ${position?.show ? '1' : 0};
transition: all 400ms ease 0s;
`;
}, [position]);
return (
<>
<Card className="session-duration-card">
<CardTitle className="session-duration-card-header">
Session Duration
</CardTitle>
<CardBody>
<ResponsiveContainer width="100%" height="100%" aspect={4.0 / 5.5}>
<BarChart
data={data}
margin={{
top: 100, // for tooltip visibility
right: 5,
left: 5,
bottom: 13,
}}
barGap={10}
>
<Tooltip
cursor={false} // hide hover effect 'grey rectangle'
position={{
// Static position
x: position?.data.x ?? 0,
y: position?.data.y ?? 0,
}}
content={<CustomTooltip />}
/>
<Bar
dataKey="pv"
fill="#8884d8"
// Handlers
onMouseMove={data => setPosition({ data: data, show: true })}
onMouseOut={data => setPosition({ data: data, show: false })}
>
{data.map((entry, index) => (
<Cell key={`cell-${index + 1}`} fill={colors[index]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</CardBody>
</Card>
</>
);
};
export default SessionDuration;
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="session-duration-tooltip">
<p className="session-duration-tooltip-label">
{getTitleOfTooltip(label)}
</p>
<p className="session-duration-tooltip-intro">
{getIntroOfPage(label)}
</p>
<p className="session-duration-tooltip-desc">
Anything you want can be displayed here.
</p>
</div>
);
}
return null;
};
SessionDuration.css
:root {
--bg-color: hsl(270 3% 29% / 0.9);
}
.session-duration-tooltip {
max-width: 250px;
position: relative;
padding: 0.5em;
border-radius: 5px;
background-color: var(--bg-color);
color: aliceblue;
}
.session-duration-tooltip::after {
content: '';
height: 0;
width: 0;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: var(--bg-color) transparent transparent transparent;
}

Answer 2

A lot of people asking for this feature here https://github.com/recharts/recharts/issues/222 and here https://github.com/recharts/recharts/issues/488. I came up with
Third working solution (with great help from #ЖнецЪ answer)
Unfortunately the problem with that answer is that you still have to hover the "bars" themselves, and mine are quite narrow, so I wanted it to show up regardless of if you are hovering the bar or the "cursor area", this solution allows the latter.
Basically:
Get the active tooltip index from the full barchart (changes on the cursor area and not the specific bar)
a useEffect hook grabs all the bars using the bar class ".recharts-bar-rectangle" and grabs the current active one using the toolTipIndex, get's the height, and sets that to the tooltip Y-position.
As before the tooltip is controlled by the internal x position but the y position is the height +/- some offset.
export default function BarChartCard(props) {
const [activeBarIndex, setActiveBarIndex] = useState();
const [toolTipYPosition, setToolTipYPosition] = useState({});
useEffect(() => {
const barCharts = document.querySelectorAll(".recharts-bar-rectangle");
if (!barCharts || !activeBarIndex) return;
// Init tooltip values
const barChart = barCharts[activeBarIndex];
setToolTipYPosition(barChart.getBoundingClientRect().height);
}, [activeBarIndex]);
return (
<BaseCard>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h2">{props.title}</Typography>
</Grid>
</Grid>
<ResponsiveContainer width={"100%"} height={300}>
<BarChart
barGap={0}
data={props.data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
onMouseMove={(e) => {
setActiveBarIndex(e.activeTooltipIndex);
}}
>
<Tooltip
content={<CustomTooltip />}
cursor={false}
position={{ y: 170 - toolTipYPosition }}
offset={-60}
allowEscapeViewBox={{ x: true, y: true }}
/>
<XAxis
style={{
fontSize: "1.125rem",
fontFamily: "Cairo",
fontWeight: 600,
}}
axisLine={false}
tickLine={false}
dataKey="date"
tickFormatter={ReformatDateShortDayName}
/>
<YAxis
allowDecimals={false}
style={{
fontSize: "1.125rem",
fontFamily: "Cairo",
fontWeight: 600,
}}
dataKey="value"
axisLine={false}
tickLine={false}
/>
<Legend
style={{
fontSize: "1.125rem",
fontFamily: "Cairo",
fontWeight: 600,
}}
iconType="circle"
iconSize={6}
align="right"
verticalAlign="top"
height={36}
formatter={(value) => (
<span
style={{
color: "#CCC",
fontSize: "1.125rem",
fontWeight: 600,
fontFamily: "Cairo",
}}
>
{value}
</span>
)}
/>
<Bar
barSize={10}
dataKey="value"
name={props.legendText}
fill="#EFC92B"
/>
</BarChart>
</ResponsiveContainer>
</BaseCard>
);
}
A hacky solution
based on some other implementation and answers out there:
const [barGraphData, setBarGraphData] = useState({})
return (
<BarChart barGap={0} data={props.data} margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}>
<Tooltip content={<CustomTooltip />}
cursor={{ fill: 'transparent' }}
position={{ y: barGraphData.height + 40}}
offset={-60}
/>
<XAxis />
<YAxis />
<Legend />
<Bar
barSize={10}
dataKey="value"
fill="#EFC92B"
onMouseOver={(data)=> {
setBarGraphData(data)
}}
onMouseLeave={(data) => {
setBarGraphData(data)
}}
/>
</BarChart>
)
So basically:
Have a static y-value, in this case I'm doing the height of the bar + some offset (at least I think it's the height of the bar). But this one could be static as well.
Add an offset to the tooltip, I had to do this otherwise it would not be on top of the bar but right shifted 60 pixels.
Let the x coordinate be handled by recharts.
As you can see from my code, I used a custom tooltip according to the recharts documentation
const CustomTooltip = ({ active, payload, label }) => {
const classes = useStyles();
return (
<Fragment>
{active && payload?.length >= 1 &&
<Card className={classes.toolTip}>
<CardContent className={classes.toolTipContent}>
<Typography className={classes.toolTipLabel}>{label}</Typography>
<Typography className={classes.toolTipValue}>{payload[0].payload.value}</Typography>
</CardContent>
</Card>
}
</Fragment>
)
}
But this is just for formatting / style, it should work with the default one as well.
Unfortunately this only seems to work when you hover the actual "Bar" and not the full area as defined by the "cursor".
Second hacky solution, which works for the full cursor area
This led me to a second solution which unfortunately gives an warning
Warning: Cannot update a component (`BarChartCard`) while rendering a different component (`label`). To locate the bad setState() call inside `label`, follow the stack trace as described in ...
The code to create get it going is here, any comment on how to make this work would be awesome!
export default function BarChartCard(props) {
const [barGraphData, setBarGraphData] = useState({});
const [activeBarIndex, setActiveBarIndex] = useState({});
const [toolTipYPosition, setToolTipYPosition] = useState({});
return (
<BaseCard>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h2">{props.title}</Typography>
</Grid>
</Grid>
<ResponsiveContainer
width={"100%"}
height={300}
>
<BarChart
barGap={0}
data={props.data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
onMouseMove={(e) => {
setActiveBarIndex(e.activeTooltipIndex)
}}
>
<Tooltip
content={<CustomTooltip />}
cursor={false}
position={{ y: -toolTipYPosition + 170}}
offset={-60}
allowEscapeViewBox={{ x: true, y: true }}
/>
<XAxis
style={{
fontSize: "1.125rem",
fontFamily: "Cairo",
fontWeight: 600,
}}
axisLine={false}
tickLine={false}
dataKey="date"
tickFormatter={ReformatDateShortDayName}
/>
<YAxis
allowDecimals={false}
style={{
fontSize: "1.125rem",
fontFamily: "Cairo",
fontWeight: 600,
}}
dataKey="value"
axisLine={false}
tickLine={false}
/>
<Legend
style={{
fontSize: "1.125rem",
fontFamily: "Cairo",
fontWeight: 600,
}}
iconType="circle"
iconSize={6}
align="right"
verticalAlign="top"
height={36}
formatter={(value) => (
<span
style={{
color: "#CCC",
fontSize: "1.125rem",
fontWeight: 600,
fontFamily: "Cairo",
}}
>
{value}
</span>
)}
/>
<Bar
label={(e) => {
if(e.index === activeBarIndex){
setToolTipYPosition(e.height)
}
return null;
}}
barSize={10}
dataKey="value"
name={props.legendText}
fill="#EFC92B"
onMouseOver={(data) => {
setBarGraphData(data);
}}
onMouseLeave={(data) => {
setBarGraphData(data);
}}
/>
</BarChart>
</ResponsiveContainer>
</BaseCard>
);
}