{
  "name": "ChartTooltip",
  "source": "src/components/Chart.tsx",
  "propsType": "ChartTooltipProps",
  "description": "ChartTooltip — the panel that shows the values under the pointer.\n\nPut it inside visx's Tooltip with `chartTooltipProps`, so visx places it and\nthis draws it: raised, rimmed and shadowed like Popover and Toast.\n\nIT IS NOT THE ACCESSIBLE WAY TO THE DATA. It appears on hover, so a keyboard\nor screen-reader user never sees it. Every chart still needs a text summary\nand the values in a table (visually hidden is fine) — the tooltip is a\nconvenience for pointer users, never the only route to a number.",
  "import": "import { ChartTooltip } from 'ionbase-ui';",
  "status": "stable",
  "since": "0.74.0",
  "summary": "The panel showing the values under the pointer on a visx chart. visx positions it; this draws it.",
  "useWhen": [
    "a chart drawn with visx shows exact values on hover",
    "several series share an x value and the reader compares them at a point"
  ],
  "useInstead": [
    {
      "when": "it explains a control rather than a data point",
      "use": "Tooltip"
    },
    {
      "when": "it holds interactive content",
      "use": "Popover"
    },
    {
      "when": "the reader needs every value, or needs them without a pointer",
      "use": "Table"
    }
  ],
  "composition": {
    "note": "Render it inside visx's Tooltip, TooltipWithBounds or TooltipInPortal with {...chartTooltipProps}, which turns off visx's own box so this one is the only panel. Axes take {...chartAxisProps} and gridlines {...chartGridProps}; a series takes className={chartSeriesClass(n)} plus ion-chart__line, __area, __bar or __point.",
    "example": "<TooltipWithBounds top={top} left={left} {...chartTooltipProps}><ChartTooltip title=\"12 Sep\" rows={[{ label: 'Success rate', value: '96.2%', series: 1 }]} /></TooltipWithBounds>"
  },
  "a11y": {
    "guarantees": [
      "rows are a <dl>, so each value is announced with its label",
      "the series swatch is aria-hidden; the label carries the name"
    ],
    "requires": [
      "a text summary and the values in a table (visually hidden is fine) — the tooltip appears on hover, so keyboard and screen-reader users never reach it",
      "`value` already formatted — the tooltip cannot know the unit or precision"
    ]
  },
  "antiPatterns": [
    {
      "dont": "making the tooltip the only way to read a value",
      "why": "it exists only under a mouse pointer; without a table the data is invisible to keyboard and screen-reader users"
    },
    {
      "dont": "leaving visx's default tooltip styles on",
      "why": "it draws a second white box with a hardcoded shadow around this one, and that box does not theme"
    },
    {
      "dont": "a swatch colour that does not match the series",
      "why": "pass the same `series` number the line or bar uses — the swatch reads the same token only if it is told the same index"
    }
  ],
  "stylesheet": "src/styles/chart.css",
  "tokens": [
    "--border-default",
    "--border-strong",
    "--border-stronger",
    "--border-subtle",
    "--border-width-default",
    "--chart-1",
    "--chart-2",
    "--chart-3",
    "--chart-4",
    "--chart-5",
    "--chart-6",
    "--chart-7",
    "--chart-8",
    "--chart-sequential-1",
    "--chart-sequential-2",
    "--chart-sequential-3",
    "--chart-sequential-4",
    "--chart-sequential-5",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-semibold",
    "--ion-chart-series",
    "--ion-shadow-shadow-lg",
    "--radius-2xs",
    "--radius-full",
    "--radius-md",
    "--spacing-12",
    "--spacing-16",
    "--spacing-4",
    "--spacing-6",
    "--spacing-8",
    "--surface-default",
    "--surface-raised",
    "--surface-sunken",
    "--text-default",
    "--text-secondary",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "title": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "What the pointer is over — usually the x value, e.g. a date."
    },
    "rows": {
      "type": "ChartTooltipRow[] | undefined",
      "required": false,
      "origin": "own",
      "description": "One row per series at that point."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Free content after the rows, for anything that is not label/value."
    }
  },
  "propCounts": {
    "own": 3,
    "aria": 0,
    "dom": 276,
    "other": 0
  }
}