---
id: "packages/active-charts/getting-started"
title: "Getting started"
description: "Receive active-charts, give it a presentation and a translator, and draw a first chart."
url: "/packages/active-charts/getting-started"
locale: "en"
revision: "4c8c9e059ce5d1b7"
---

# Getting started

## 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](/receiving-packages):

```bash
node tools/rps/rps-apply.mjs plan --bundle <bundle-folder> --development
node 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"
  }
}
```

```bash
pnpm install
node 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.

**Example: A first chart**

Client: Runs entirely in your browser. Source: `examples/charts/first-chart.tsx`.

```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](/packages/active-charts/families) draws every family with small data.