Working With Charts

Consuming quill-charts

Use the package's components and defaults before writing custom chart code. Read only the example or topic needed for the task. For changes inside the library, use CONTRIBUTING.md instead.

Choose a component

Use the chart-selection table, then read a matching package story. For a date axis, start with DateAxis in TimeSeriesLineChart stories. Import components and types from @posthog/quill-charts, not internal source paths.

Supply data, theme, and dimensions

• Use stable series keys and typed meta for tooltip or click data.
• For label-based charts, keep labels unique and align each series' data with them.
• Use ISO date labels with TimeSeries* charts; format ticks through the axis config.
• Use NaN for missing numeric series values, not zero.
• Keep series, config, and callbacks stable across unrelated renders.
• Give charts that fill their container a parent with real dimensions, including a nonzero height.

Reuse the host's existing chart theme setup. For a new host without chart theming, use the package's useChartTheme hook. Follow the setup and theme docs for tokens and CSS. Omit series colors to use the theme palette; resolve CSS variables before passing explicit canvas colors. Read the selected chart's props and the Series type for its data contract.

Configure before customizing

Prefer the selected chart's built-in tooltip and legend. Use config options and exported overlays before custom renderers. Load only the relevant topic:

Verify

Render at the intended container sizes and in light and dark themes. Check missing values, long labels, and any interactions you changed. Extend relevant tests and stories; use the consumer testing guide for chart accessors.

Keep detailed API behavior in the package docs rather than copying it into this skill.