# Line Chart

> Charts in Twentyfirst UI.

Component · Charts · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/LineChart/)

## Example

```tsx
import { LineChart } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel"
      style={{
        maxWidth: 620,
      }}
    >
      <LineChart
        labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
        format={(v) => "€" + Math.round(v / 1000) + "k"}
        series={[
          {
            values: [18000, 22000, 21000, 29000, 34000, 41000],
            tint: "mint",
            area: true,
          },
          {
            values: [12000, 14000, 17000, 16000, 21000, 24000],
            tint: "sky",
          },
        ]}
      />
    </div>
  );
}
```

## Props

### LineChart

| Prop | Type | Notes |
| --- | --- | --- |
| `labels` | `string[]` | Required |
| `series` | `{ values: number[]; tint?: Tint \| "ink"; area?: boolean }[]` | Required |
| `height?` | `number` |  |
| `width?` | `number` |  |
| `format?` | `(v: number) => string` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |