Agent skill · posthog
working-with-charts
Guides consumers of @posthog/quill-charts through chart selection, data, themes, sizing, and composition. Use when adding or changing a chart built with the package, including its axes, tooltips, legend, overlays, or interactions. Links to package examples and API docs. Does not cover product integration or library internals.
What it needs
About 2k tokens when loaded.
What this skill does
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: Task Package docs ------------------------------------------- -------------------------------------------------------------------------------- Axis formatting, ranges, or multiple axes Axes Bar layouts or per-bar styling Bars Tooltip formatting or content Tooltips Legend visibility or interaction Legend Reference lines, labels, or custom overlays Overlays Clicks, zoom, or selection Interactions Verify Render at the intended container sizes and in light and dark themes. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills posthog/working-with-charts