# Line Chart

Animated, stepped, and zoomable line charts.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview base="pixijs" title="Basic Chart" name="line-chart-demo">
  <ChartcnExampleLineChart />
</ComponentPreview>

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @chartcn/pixijs/line-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install pixi.js
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/pixijs/ui/chart.tsx" title="components/chart/pixijs/chart.tsx" />

      <ComponentSource src="registry/bases/pixijs/ui/renderer.ts" title="components/chart/pixijs/renderer.ts" />

      <ComponentSource src="registry/bases/pixijs/ui/tooltip.ts" title="components/chart/pixijs/tooltip.ts" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/brush.tsx" title="components/chart/pixijs/cartesian-chart/brush.tsx" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/types.ts" title="components/chart/pixijs/cartesian-chart/types.ts" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/cartesian.ts" title="components/chart/pixijs/cartesian-chart/cartesian.ts" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/cartesian-chart.tsx" title="components/chart/pixijs/cartesian-chart/cartesian-chart.tsx" />

      <ComponentSource src="registry/bases/pixijs/components/line-chart/line-chart.tsx" title="components/chart/pixijs/line-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  ChartcnLineChart,
  type ChartConfig,
} from "@/components/chart/pixijs/line-chart";
```

```tsx
<ChartcnLineChart data={data} config={chartConfig} xDataKey="month">
  <ChartcnLineChart.XAxis dataKey="month" />
  <ChartcnLineChart.Brush />
  <ChartcnLineChart.Legend />
  <ChartcnLineChart.Tooltip />
  <ChartcnLineChart.Line dataKey="desktop" strokeWidth={2.5} />
  <ChartcnLineChart.Line dataKey="mobile" opacity={0.8} />
</ChartcnLineChart>
```

## Examples [#examples]

### Data transitions [#data-transitions]

<ComponentPreview base="pixijs" title="Animated data updates" name="animated-update-line-chart-demo">
  <ChartcnExampleAnimatedUpdateLineChart />
</ComponentPreview>

### Step lines [#step-lines]

<ComponentPreview base="pixijs" title="curveType='step'" name="step-curve-type-line-chart-demo">
  <StepLineChart />
</ComponentPreview>

### Loading state [#loading-state]

<ComponentPreview base="pixijs" title="isLoading='true'" name="loading-state-line-chart-demo">
  <LoadingLineChart />
</ComponentPreview>

## API Reference [#api-reference]

### ChartcnLineChart [#chartcnlinechart]

| Prop            | Type                                                  | Default                                 |
| --------------- | ----------------------------------------------------- | --------------------------------------- |
| `data`          | `Data[]`                                              | `required`                              |
| `config`        | `ChartConfig`                                         | `required`                              |
| `children`      | `ReactNode`                                           | -                                       |
| `xDataKey`      | `string`                                              | -                                       |
| `curveType`     | `"linear" \| "step" \| "step-before" \| "step-after"` | `"linear"`                              |
| `animation`     | `boolean \| AnimationConfig`                          | `{ duration: 650, easing: "cubicOut" }` |
| `isLoading`     | `boolean`                                             | `false`                                 |
| `showBrush`     | `boolean`                                             | `false`                                 |
| `startIndex`    | `number`                                              | -                                       |
| `endIndex`      | `number`                                              | -                                       |
| `onBrushChange` | `({ startIndex: number; endIndex: number }) => void`  | -                                       |

### Line [#line]

| Prop           | Type                                                  | Default    |
| -------------- | ----------------------------------------------------- | ---------- |
| `dataKey`      | `string`                                              | `required` |
| `strokeWidth`  | `number`                                              | `2.25`     |
| `opacity`      | `number`                                              | `1`        |
| `curveType`    | `"linear" \| "step" \| "step-before" \| "step-after"` | -          |
| `connectNulls` | `boolean`                                             | `false`    |

### Shared parts [#shared-parts]

#### XAxis [#xaxis]

| Prop            | Type                                           | Default |
| --------------- | ---------------------------------------------- | ------- |
| `dataKey`       | `string`                                       | -       |
| `tickFormatter` | `(value: string, index?: number) => ReactNode` | -       |

#### YAxis [#yaxis]

| Prop            | Type                                           | Default |
| --------------- | ---------------------------------------------- | ------- |
| `tickFormatter` | `(value: string, index?: number) => ReactNode` | -       |

#### Grid [#grid]

| Prop         | Type      | Default |
| ------------ | --------- | ------- |
| `horizontal` | `boolean` | `true`  |
| `vertical`   | `boolean` | `true`  |

#### Brush [#brush]

| Prop         | Type     | Default |
| ------------ | -------- | ------- |
| `startIndex` | `number` | -       |
| `endIndex`   | `number` | -       |

#### Legend [#legend]

| Prop       | Type                                     | Default    |
| ---------- | ---------------------------------------- | ---------- |
| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |