PaceUI

  • Components
  • Blocks
  • Templates
  • Studio
  • Resources
Intro
  • Blocks
  • Installation
  • MCP
Dashboard
  • Stats
  • Widget
  • Tables
  • Notification
  • Profile Menu
  • Widget Layout
  • Promos
Marketing
  • Hero
  • Feature
  • Pricing
  • Testimonials
  • FAQs
  • Topbar
  • Footer
  • Cookie Consent
  • Login
  • Register
  • Forgot Password
  • Reset Password
  • Verify Email
  • 2 FA
Apps
  • Analytics
  • Education
  • File Manager
  • Projects
  • Finance
  • Health
  • Chats
  • Forms
Free
  • 30+ Shadcn free blocks
  1. Blocks
  2. TanStack Charts
PreviousNext

Interactive Cursor

Free synchronized crosshairs, custom axis pointers, cursors, and table row syncing.

ECharts Axis Pointer

Free 2D Continuous Crosshair Cursor

Synchronized Dual-Grid X-Axis Crosshair

Pinned Nested Chart Tooltip

Select Extrema

Chart Table Selection

Recharts Interactive Legend

Hierarchy & FlowInteractive Zoom

PaceUI

Animated blocks, components, and templates for Next.js and TanStack Start. Built with Motion and shadcn - clean code you own.

GitHubTwitterDiscord

Products

BlocksComponentsTemplatesCraftsTanStack ChartsMCP ServerStarter KitsStyleX Components

Resources

DocumentationMotion ComponentsGSAP AnimationsNative AIBlogChangelog

Pricing & Account

PricingManage AccountLicensesAPI KeysAffiliate Program

Company

Contact UsDiscord CommunityPrivacy PolicyTerms of Service

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI

Snapped Axis Pointer Grouped Crosshair
ECharts-style vertical snapping axis pointer grouping multi-series metrics at X timeline steps
JanAprJulOct100150200Unemployed (Thousands)
Crosshair line snaps to exact X positions comparing all 3 industries
`focus: group-x` automatically locks pointer cursor to nearest temporal timestamp step
Free 2D Continuous Crosshair Cursor
Arbitrary XY continuous crosshairs with floating dynamic tick axis coordinate readouts
50100150200250300Horsepower (HP)1020304050Fuel Economy (MPG)180 HP28.0 MPG
Coordinates: 180 HP · 28.0 MPG
`continuousCursor` evaluates non-discrete 2D coordinates across spatial plane
Synchronized Dual-Grid X-Axis Crosshair Cursors
Multi-panel vertically synchronized charts sharing pointer cursor alignment across separate Y scales
1502002024 (k)JanAprJulOct2002503002023 (k)
Moving cursor over top grid synchronizes crosshair on bottom grid
`viewGrid` shares identical `x` scales to align dates perfectly across stacked panels
Pinned Energy Generation Breakdown Tooltip
Rich interactive popover tooltip rendering nested breakdown metrics on hover
JanFebMarAprMayJunJulAugSepOctNovDec05001,0001,5002,000Energy (kWh)
Solar generation peaks during summer month curves
Combines Area (total demand), Bar (solar on-site), and Line (grid load)
Automatic Extrema High/Low Annotations
Line chart automatically pinpointing and annotating global min & max points
Low $139.86High $196.58Jan 07Jan 14Jan 21Jan 28Feb 04Feb 11Feb 18Feb 25Date Timeline140160180Stock Closing Price ($ USD)
Automatic select reducer isolates high/low extrema values
Decorative text marks position callout badges dynamically at extreme coordinates
Chart & Data Table Bidirectional Selection
2-way state synchronization connecting scatter chart points to interactive table rows
185190195200205210215220Flipper Length (mm)3,0004,0005,000Body Mass (g)
Selected: Observation #5 (Dream, 3686g)
LabelIslandFlipper (mm)Mass (g)
Observation #1Biscoe1822992
Observation #2Dream1843025
Observation #3Torgersen1923329
Observation #4Biscoe1923421
Observation #5Dream1983686
Observation #6Torgersen1983939
Observation #7Biscoe1984254
Observation #8Dream2014490
Observation #9Torgersen2074425
Observation #10Biscoe2074729
Observation #11Dream2145077
Observation #12Torgersen2195125
Observation #13Biscoe2195441
Observation #14Dream2195618
Observation #15Torgersen2235888
Selecting a row in the table highlights the point on chart instantly
`keyedSelection` provides bidirectional binding between visual marks and tabular HTML elements
Interactive Toggleable Legend
Click interactive legend items to toggle series visibility on/off dynamically
JanAprJulOctJan0200400600Unemployed Count (k)ManufacturingConstruction
Controlled signal updates visible series in state reactively
`interactiveColorLegend` integrates with React state for seamless toggle interaction