Getting started

Receive active-charts, give it a presentation and a translator, and draw a first chart.

@workspace/active-charts 6.0.0Status unknowncontent differs from the recorded release 6.0.0baseline ce081dc3

Receive the package#
active-charts is a product; its owners active-format and active-helpers come along. Ask the maintainer of Foundation for a bundle of your whole managed set, then follow Receiving packages:
Terminal
```
node tools/rps/rps-apply.mjs plan --bundle <bundle-folder> --developmentnode tools/rps/rps-apply.mjs apply --bundle <bundle-folder> --expect-plan <digest> --development
```
Declare, install and verify#
JSON
```
{  "dependencies": {    "@workspace/active-charts": "workspace:*",    "react": "^19.0.0",    "react-dom": "^19.0.0"  }}
```
Terminal
```
pnpm installnode tools/rps/rps-apply.mjs verify-install --from <app-folder>
```
The package imports its own stylesheet with its entry; in Next.js list it and its owners in transpilePackages, and give TypeScript a declaration for CSS imports if your setup has none.

A first chart#

TSX

'use client';
import {  ChartDefaults,  englishChartTranslator,  LineChart,} from '@workspace/active-charts';
<ChartDefaults locale="en-GB" t={englishChartTranslator}>  <LineChart    data={data}    xKey="date"    yKey="price"    name="Price"    xAxis={{temporalSemantic: 'calendarDate'}}    height={260}  /></ChartDefaults>;

A date axis declares what its values mean: 'calendarDate' for a day, 'instant' for a moment. Date values are Date objects; a plain string is a category.
Direction comes from dir or the page, never from the locale.

A first chartClient

Full source examples/charts/first-chart.tsx

// apps/docs/examples/charts/first-chart.tsx'use client';
import {  ChartDefaults,  englishChartTranslator,  LineChart,} from '@workspace/active-charts';
const data = [  {date: new Date(Date.UTC(2026, 0, 2)), price: 100.5},  {date: new Date(Date.UTC(2026, 0, 5)), price: 101.2},  {date: new Date(Date.UTC(2026, 0, 6)), price: 102.0},  {date: new Date(Date.UTC(2026, 0, 7)), price: 101.4},  {date: new Date(Date.UTC(2026, 0, 8)), price: 103.1},  {date: new Date(Date.UTC(2026, 0, 9)), price: 104.0},];
/** The smallest chart: a presentation and a translator once, a line per series. */export default function FirstChart() {  return (    <ChartDefaults locale="en-GB" t={englishChartTranslator}>      <LineChart        data={data}        xKey="date"        yKey="price"        name="Price"        // The x values are calendar days, not moments in time.        xAxis={{temporalSemantic: 'calendarDate'}}        height={260}      />    </ChartDefaults>  );}

Next#

Families draws every family with small data.

This page as Markdown

Receive the package#

Declare, install and verify#

A first chart#

Next#