Skip to main content

​
Overview

Active Users
Last 7 days
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

npm install @araf-ds/core recharts

​
Usage

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

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

​
Area Fill

<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

<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

<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

​
data
Record<string, any>[]
required
Array of data objects. Each object represents one point on the x-axis.
​
dataKey
string
required
The key used as the x-axis category (e.g. "date", "month").
​
lines
LineConfig[]
required
Array of line configurations: { key, label, color, fill?, strokeDasharray? }.
​
height
number
default:"300"
Chart height in pixels.
​
referenceLines
ReferenceLineConfig[]
Horizontal reference lines: { y, label, color, strokeDasharray? }.
​
showDots
boolean
default:"true"
Show dots at data points.
​
showGrid
boolean
default:"true"
Show background grid lines.
​
showLegend
boolean
default:"true"
Show color legend.
​
showTooltip
boolean
default:"true"
Show interactive hover tooltips.
​
curve
string
default:"monotone"
Line curve interpolation. Values: linear · monotone · step

​
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

Do

  • 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

Don't

  • 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)