> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Line Chart

> A continuous line chart for visualizing trends over time — supports multiple lines, area fill, and interactive tooltips.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{fontFamily:"Inter,sans-serif",maxWidth:"420px"}}>
    <div style={{fontSize:"13px",fontWeight:600,color:"#101828",marginBottom:"4px"}}>Active Users</div>
    <div style={{fontSize:"12px",color:"#667085",marginBottom:"16px"}}>Last 7 days</div>

    <div style={{position:"relative",height:"100px"}}>
      <svg width="100%" height="100" viewBox="0 0 400 100" preserveAspectRatio="none">
        <defs>
          <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#0479CE" stopOpacity="0.15" />

            <stop offset="100%" stopColor="#0479CE" stopOpacity="0" />
          </linearGradient>
        </defs>

        <path d="M0,70 C50,60 80,30 130,40 C180,50 200,20 250,25 C300,30 330,45 400,35" fill="url(#areaFill)" stroke="none" />

        <path d="M0,70 C50,60 80,30 130,40 C180,50 200,20 250,25 C300,30 330,45 400,35" fill="none" stroke="#0479CE" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />

        {[[0,70],[130,40],[250,25],[400,35]].map(([x,y],i) => (
                        <circle key={i} cx={x} cy={y} r="4" fill="#0479CE" stroke="#fff" strokeWidth="2"/>
                      ))}
      </svg>

      <div style={{display:"flex",justifyContent:"space-between",marginTop:"4px"}}>
        {["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map(d => (
                        <span key={d} style={{fontSize:"10px",color:"#9CA3AF"}}>{d}</span>
                      ))}
      </div>
    </div>
  </div>
</div>

**Line Chart** visualizes continuous data trends over time. It supports multiple lines, area fills, reference lines, and dot markers — ideal for metrics, analytics dashboards, and time-series data.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core recharts
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core recharts
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core recharts
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import { LineChart } from "@araf-ds/core"

const data = [
  { date: "Mon", users: 2400, sessions: 1800 },
  { date: "Tue", users: 1398, sessions: 2200 },
  { date: "Wed", users: 9800, sessions: 7200 },
  { date: "Thu", users: 3908, sessions: 2900 },
  { date: "Fri", users: 4800, sessions: 3100 },
  { date: "Sat", users: 3800, sessions: 2400 },
  { date: "Sun", users: 4300, sessions: 2800 },
]

export default function Example() {
  return (
    <LineChart
      data={data}
      dataKey="date"
      lines={[
        { key: "users", label: "Users", color: "#0479CE" },
        { key: "sessions", label: "Sessions", color: "#16A34A" },
      ]}
      height={300}
    />
  )
}
```

***

## Variants

### Simple Line

```tsx theme={null}
<LineChart
  data={data}
  dataKey="date"
  lines={[{ key: "revenue", label: "Revenue", color: "#0479CE" }]}
  height={300}
/>
```

### Area Fill

```tsx theme={null}
<LineChart
  data={data}
  dataKey="date"
  lines={[
    {
      key: "users",
      label: "Active Users",
      color: "#0479CE",
      fill: true,   // enables gradient area under the line
    },
  ]}
  height={300}
/>
```

### Multiple Lines

```tsx theme={null}
<LineChart
  data={data}
  dataKey="date"
  lines={[
    { key: "impressions", label: "Impressions", color: "#0479CE" },
    { key: "clicks", label: "Clicks", color: "#16A34A" },
    { key: "conversions", label: "Conversions", color: "#F59E0B" },
  ]}
  height={300}
  showLegend
/>
```

### With Reference Line

```tsx theme={null}
<LineChart
  data={data}
  dataKey="date"
  lines={[{ key: "value", label: "Score", color: "#0479CE" }]}
  referenceLines={[
    { y: 80, label: "Target", color: "#DC2626", strokeDasharray: "4 4" },
  ]}
  height={300}
/>
```

***

## API Reference

<ParamField path="data" type="Record<string, any>[]" required>
  Array of data objects. Each object represents one point on the x-axis.
</ParamField>

<ParamField path="dataKey" type="string" required>
  The key used as the x-axis category (e.g. `"date"`, `"month"`).
</ParamField>

<ParamField path="lines" type="LineConfig[]" required>
  Array of line configurations: `{ key, label, color, fill?, strokeDasharray? }`.
</ParamField>

<ParamField path="height" type="number" default="300">
  Chart height in pixels.
</ParamField>

<ParamField path="referenceLines" type="ReferenceLineConfig[]">
  Horizontal reference lines: `{ y, label, color, strokeDasharray? }`.
</ParamField>

<ParamField path="showDots" type="boolean" default="true">
  Show dots at data points.
</ParamField>

<ParamField path="showGrid" type="boolean" default="true">
  Show background grid lines.
</ParamField>

<ParamField path="showLegend" type="boolean" default="true">
  Show color legend.
</ParamField>

<ParamField path="showTooltip" type="boolean" default="true">
  Show interactive hover tooltips.
</ParamField>

<ParamField path="curve" type="string" default="monotone">
  Line curve interpolation. Values: `linear` · `monotone` · `step`
</ParamField>

***

## Accessibility

* SVG chart includes `<title>` and `<desc>` elements for screen readers
* Provide a data table fallback for critical data — charts are visual only
* Tooltip values are announced via `aria-live="polite"` region
* Use distinct colors AND line styles (solid, dashed, dotted) for multi-line charts

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Line Chart for time-series and trend data (daily, weekly, monthly)
    * Use `fill: true` (area fill) for single-metric dashboards — it's easier to read
    * Add reference lines for targets or thresholds
    * Limit to 4–5 lines maximum before using small multiples
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Line Chart for categorical comparisons — use Bar Chart
    * Don't connect dots when data has gaps — use `connectNulls={false}`
    * Don't plot more than 5 lines on one chart — it becomes unreadable
    * Don't omit axis labels — always show the unit (USD, %, users)
  </Card>
</CardGroup>