8

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.

enter image description here

This is how It looks like now.

enter image description here

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.

2 Answers 2

5
+150

To solve this problem, will need to get the height and width of each bar and tooltip.

  1. Need two functions onMouseMove and onMouseOut to get the height and width of the Bar component.
  2. 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 ).
  3. In the Tooltip component, set the position object for static values X, Y and using the state values, set the height and width.
  4. Using useEffect, to find the .recharts-tooltip-wrapper class, to define the height and width of the DOM element.
  5. 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).

Edit dazziling-code

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;
}

1

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>
  );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.