@neo4j-ndl/react-charts/skills/ndl-react-charts/SKILL.md

React implementation of charts from Neo4j Design System

---
name: ndl-react-charts
description: >-
  Build data visualizations with the Neo4j Needle React Charts library
  (@neo4j-ndl/react-charts), an Apache ECharts-based charting layer. Use when
  adding or modifying charts in a React app. Provides component props,
  accessibility requirements, and runnable usage examples. Works with any agent
  that supports skills (Cursor, Claude, etc.).
---

# Neo4j Needle React Charts (@neo4j-ndl/react-charts)

> 📌 Shipped with `@neo4j-ndl/react-charts`. Once installed into your repo (e.g. via
> `npx skills add`) this folder is detached from the package — the installed
> package (TypeScript types in `node_modules/@neo4j-ndl/react-charts`) is the source of
> truth.

Use Neo4j Needle React Charts instead of hand-rolling chart components.

## Setup

- Import the base stylesheet once at the app root (if not already wired):
  `import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';`
- Import chart components from `@neo4j-ndl/react-charts`.
- Requires `@neo4j-ndl/react` and `echarts` as peer dependencies; make sure
  they are installed.

## Rules

- **Never hallucinate props.** Before using any prop — including common-sounding
  ones like `size`, `tone`, or `shadow` — confirm it appears in the component's
  doc here or in the package's TypeScript types. Do not assume APIs from other
  libraries (MUI, Radix, Chakra). If something is unclear, ask the user — or when
  running unattended, prefer the TypeScript types and omit the uncertain prop
  rather than guessing.
- These docs are the primary source for props, accessibility, and examples. The
  package's `.d.ts` type contract is authoritative: if the types disagree with
  these docs, the **types win**. Do not reverse-engineer behavior from the
  compiled implementation source in `node_modules`.
- Chart configuration is driven by Apache ECharts. Before assuming a chart option
  exists, confirm it in the component's props here or the TypeScript types, and
  consult the ECharts option reference (https://echarts.apache.org/en/option.html)
  for supported behavior.
- Follow the accessibility guidance in each component's doc; don't strip built-in
  roles or keyboard behavior.

## How to use this skill

1. Find the component in the catalog below to get its docs file and import path.
2. Read `components/<file>` for that component's props, accessibility
   requirements, and runnable examples; prefer those examples.

## Components

Import from `@neo4j-ndl/react-charts`.

| Component | Docs | Accessibility | Examples |
|-----------|------|---------------|----------|
| `Chart` | [components/charts.md](components/charts.md) |  | 20 |