Skip to content
Get Pro
Utilities

Chart Tooltip

The tooltip and crosshair kit on real charts.

$149 once · every Pro piece

Customize

A raised panel follows the crosshair on a lazier spring, tweens its size when the content changes, flips at the edges and scale-fades in and out. Crosshairs come solid, dashed or as a gradient, fading at both ends; a finance crosshair tracks the pointer's height with a rolling value pill on the y axis; the date pill on the x axis rolls its digits while axis labels step aside. Dots ride the line with a halo or a ring. Bars keep the dots and the panel without a line, and three sparklines share one store so their crosshairs and readouts move together. Nothing re-renders while the pointer moves.

Install

npx shadcn@latest add @obsyde/chart-tooltip

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { ChartTooltipDemo } from '@/components/obsyde/ember/chart-tooltip/ChartTooltipDemo';

export function Example() {
  return (
    <ChartTooltipDemo view="panel" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/chart-tooltip/ChartTooltipDemo.tsxcomponent
  • ember/chart-tooltip/chart-tooltip.cssstyles
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/series.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewView'panel' | 'corner' | 'finance' | 'bars' | 'synced''panel'
tooltipTooltip'panel' | 'corner' | 'none''panel'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
dotsDots'halo' | 'ring' | 'none''halo'
glowDot glowbooleanfalse
followPanel follow'lazy' | 'crosshair''lazy'
snapSnap to rowsbooleantrue
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
backgroundBackground'grid' | 'dots' | 'none''grid'
pointsPointsnumber30
seedSeednumber3