Charts

What each layer owns

TanStack Charts compiles data, marks and scales into a chart model and owns renderer lifecycle, hit testing and interaction. Ghost's Chart hosts the native React integration and adds shared appearance, focus emphasis, tooltip surface/avoidance and label contrast. It does not translate a second chart schema or own your data pipeline.

Use Chart for visual examples and component styling. Use this guide to connect data and choose the integration boundary.

First chart

Follow package installation. Install @tanstack/charts@1.1.0 and @tanstack/react-charts@1.1.0; import @ghost-ui/core/styles.css and @ghost-ui/core/charts.css once. The dedicated @ghost-ui/core/charts entry avoids the broad components barrel. These versions use the current chart grammar, not the older React Charts beta axis API.

123456789101112131415import { defineChart, lineY } from "@tanstack/charts";
import { scaleLinear } from "@tanstack/charts/scales/linear";
import { tooltip } from "@tanstack/charts/tooltip";
import { Chart } from "@ghost-ui/core/charts";
const rows = [{ week: 1, success: 61 }, { week: 2, success: 71 }];
const definition = defineChart({
  marks: [lineY(rows, { x: "week", y: "success", points: true })],
  scales: {
    x: { scale: scaleLinear().domain([1, 2]), axis: { label: "Week" } },
    y: { scale: scaleLinear().domain([0, 100]), axis: { label: "Task success (%)" } },
  },
}, { tooltip: { use: tooltip } });
export function SuccessChart() {
  return <Chart definition={definition} ariaLabel="Weekly task success: 61 then 71 percent" />;
}

lineY creates a mark from rows; x and y map row fields to visual channels. A scale maps values into drawing coordinates. Keep labels and units explicit, and give the host usable dimensions; the component API covers sizing.

Data and interaction

The caller owns fetching, loading/error/empty feedback, aggregation, missing-value policy and timezone interpretation. Pass new data/definitions when inputs change. Memoize expensive derived definitions when useful; do not mutate data underneath a cached model. Parse serialized dates at your boundary and use the scale appropriate to your actual values.

The tooltip plugin is optional and must be registered in the definition when used. Native tooltip focus, collision, pinning and portal behavior stay upstream. Ghost's body wrapper adds presentation without creating a second selection engine. Provide a meaningful ariaLabel and an alternative summary or table when readers need exact values.

Continue with models and extensions for custom rendering and export. TanStack's overview links grammar guides and reference; its latest docs follow unreleased main, so verify recipes against the installed 1.1.0 declarations.

Troubleshooting

An empty chart can mean empty data, an incorrect channel key, a clipped domain or a zero-sized host; inspect those before adding CSS. A missing tooltip can mean its plugin was never registered. A stale chart can mean the caller mutated an existing input instead of supplying the next definition. Use the native React host directly if you need upstream behavior beyond Ghost's host contract.