Tooltip

[fermuch]

Is there any way to add a tooltip?

[borisyankov]

Since this is a 'sparklines' component, I consider this is out of scope.
You can always try adding it yourself, and ask me questions if you need help.

[fermuch]

I see. Then, how about passing the prop onMouseMove so we can do something like this:

<Sparklines data={[1, 4, 6, 1, 2, 4, 6]}>
  <text ref="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
  <SparklinesBars onMouseMove={this.showTooltip}/>
</Sparklines>

And onMouseMove is passed down to every ?

EDIT: wasn't rendering in the comment.

[codemeasandwich]

+1

[RusAlex]

+1

[Losses]

+1

[mmahalwy]

+1

[kib357]

+1

[macdja38]

+1

[borisyankov]

Wasn't a huge fan of the feature, but since it is requested so much, I'll add this next.

[nichliu]

+1

[amir5000]

+1

[dvdplm]

@fermuch @borisyankov Is there code cooking for this or would you welcome a PR? :)

EDIT: first draft #54

[borisyankov]

@dvdplm Nothing cooking yet, feel free to do a PR 👍

[gabrielcsapo]

added mouseover feature in f1dbc9e

[592da]

@gabrielcsapo thanks!

demo snip anyone ?

[anton-fedorov]

@borisyankov do you mind publishing version with tooltip to https://www.npmjs.com/package/react-sparklines?

[Fxlr8]

Now i see that SparklinesLine accepts onMouseMove prop, but it never gets called. Do you have a working demo? There is nothing about it in docs

[ghost]

Was this feature added? If so, can you please provide an example of usage or documentation?

[ghost]

^ @fermuch @borisyankov @gabrielcsapo ^

[gabrielcsapo]

<Sparklines data={[1, 4, 6, 1, 2, 4, 6]}>
  <text ref="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
  <SparklinesLine onMouseMove={this.showTooltip}/>
</Sparklines>

should work, what happens when this is run? @1eddy87

[ghost]

tested it out using the code you provided and I don't anything showing up, no errors in the console. Just don't work.

Do I need to import something else?

This is what I'm using at the moment:

import { Sparklines, SparklinesLine, SparklinesSpots, SparklinesReferenceLine } from 'react-sparklines';

@gabrielcsapo

[cravo123]

<Sparklines data={[1, 4, 6, 1, 2, 4, 6]}>
  <text ref="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
  <SparklinesLine onMouseMove={this.showTooltip}/>
</Sparklines>

should work, what happens when this is run? @1eddy87

Hi gabrielcsapo, thank you for posting the snippet. May I ask if you have a demo snippet code to show how to define this.showTooltip?

[rrjanbiah]

FWIW:

1. Related new ticket Tooltip improvements #92
2. Fork that "seems" to be having tooltip https://github.com/vegetableman/react-sparklines (no demo)

[claaslange]

I have found a very hacky solution:

export function SparklineDemo() {
  const [displayTooltip, setDisplayTooltip] = useState(false);
  const [tooltipData, setTooltipData] = useState(null);
  const [eventPosition, setEventPosition] = useState(null);
  const [hoverPosition, setHoverPosition] = useState(null);

  const sparklineData = [0, 1, 2, 3, 4, 5, 6, 7, 8];

  // this is used to calculate a custom reference line point
  const max = Math.max.apply(Math, sparklineData);
  const min = 0;
  const margin = 2;
  const limit = 1;
  const width = 100;
  const height = 20;
  const referencePoint = 5; // draw the reference line a the y value for the datapoint 5
  const vfactor = (height - margin * 2) / (max - min || 2);
  const y = (max - referencePoint) * vfactor;

  return (
    <>
        <div
          onMouseMove={(event) => {
            if (displayTooltip && hoverPosition) {
              const horizontalDisplacement = Math.abs(event.pageY - hoverPosition.y);
              const verticalDisplacement = Math.abs(event.pageX - hoverPosition.x);
              // hide the tooltip if the cursor moved more than 10 px in any direction
              if (horizontalDisplacement > 10 || verticalDisplacement > 10) {
                setDisplayTooltip(false);
                setHoverPosition(null);
              }
            }

            setEventPosition({ x: event.pageX, y: event.pageY });
          }}
          onMouseLeave={() => {
            setDisplayTooltip(false);
            setHoverPosition(null);
          }}
          className="text-center"
        >
          {displayTooltip && (
            <div
              className={`${
                displayTooltip ? 'visible' : 'invisible'
              } absolute z-50 bg-white rounded border-gray-300 shadow-lg p-1`}
              style={{
                top: eventPosition?.y + 10 ?? 0,
                left: eventPosition?.x + 10 ?? 0,
              }}
            >
              {tooltipData.text}
            </div>
          )}
          <Sparklines
            data={sparklineData}
            width={width}
            height={height}
            min={min}
            max={max}
            margin={margin}
          >
            <SparklinesLine
              style={{ stroke: '#4a5568', fill: '#edf2f7', fillOpacity: 1 }}
              onMouseMove={(e, data, point) => {
                setDisplayTooltip(true);
                setHoverPosition(eventPosition);
                setTooltipData({
                  point: point,
                  text: data,
                });
              }}
            />
            <SparklinesReferenceLine type={SparklinesReferenceLineTypes.custom} value={y} />
          </Sparklines>
        </div>
      </div>
    </>
  );
}

The CSS classes are from Tailwindcss so you would neet to adopt some stuff like visible oder invisible. Also this is taken from a Typescript-based project and I didn't test the snippet, so there might be some bugs. The general idea should be clear however.

[and1son]

Is that tooltip functionality implemented or not? Can't figure it out..

[jawadakram20]

Is the tooltip added or still not? If added how can we use it for sparklinebars

[khilnani]

+1

[aymather]

Any update on this request? Would love the feature myself <3