LineChart

A responsive line chart component built on Recharts for visualizing trends and data changes over time.

Install Dependencies

npx quickcode-ui add LineChart

pnpm dlx quickcode-ui add LineChart

yarn dlx quickcode-ui add LineChart

bunx quickcode-ui add LineChart

Examples

Basic

Basic Line Chart

Linear

Linear Line Chart

Step

Step Line Chart

Multiple Lines

Multiple Lines Chart

With Legend

Line Chart with Custom Legend

Revenue

Expenses

import { 
  LineChart, 
  Line, 
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  CartesianGrid,
  XAxis,
  type ChartConfig 
} from '@/components/ui/LineChart'
import { TrendingUp, DollarSign } from 'lucide-react'

const data = [
  {
    "month": "Jan",
    "revenue": 4200,
    "expenses": 4800
  },
  {
    "month": "Feb",
    "revenue": 5800,
    "expenses": 3200
  },
  {
    "month": "Mar",
    "revenue": 4600,
    "expenses": 2900
  },
  {
    "month": "Apr",
    "revenue": 7200,
    "expenses": 3800
  },
  {
    "month": "May",
    "revenue": 6400,
    "expenses": 3400
  },
  {
    "month": "Jun",
    "revenue": 8900,
    "expenses": 4100
  }
]

const config: ChartConfig = {
  revenue: {
    label: "Revenue",
    color: "var(--chart-1)",
  },
  expenses: {
    label: "Expenses",
    color: "var(--chart-2)",
  },
}

const CustomLegend = () => {
  return (
    <div className="flex justify-center gap-6 mt-4">
      <div className="flex items-center gap-2">
        <TrendingUp className="w-4 h-4" style={{ color: 'var(--chart-1)' }} />
        <span className="text-sm text-muted-foreground">Revenue</span>
      </div>
      <div className="flex items-center gap-2">
        <DollarSign className="w-4 h-4" style={{ color: 'var(--chart-2)' }} />
        <span className="text-sm text-muted-foreground">Expenses</span>
      </div>
    </div>
  )
}

export function LegendLineChart() {
  return (
    <div>
      <ChartContainer config={config} className="h-[300px]">
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
          <XAxis dataKey="month" stroke="var(--muted-foreground)" />
          <ChartTooltip content={ChartTooltipContent} />
          <Line
            dataKey="revenue"
            type="monotone"
            stroke="var(--color-revenue)"
            strokeWidth={2}
            dot={{ r: 4 }}
            activeDot={{ r: 6 }}
          />
          <Line
            dataKey="expenses"
            type="monotone"
            stroke="var(--color-expenses)"
            strokeWidth={2}
            strokeDasharray="5 5"
            dot={{ r: 4 }}
            activeDot={{ r: 6 }}
          />
        </LineChart>
      </ChartContainer>
      <CustomLegend />
    </div>
  )
}

Props

ChartContainer

Prop	Type	Default	Description
`config`	`ChartConfig`	—	Configuration object defining chart colors and labels
`children`	`ReactNode`	—	Chart components to render
`className`	`string`	—	Additional CSS classes

LineChart

Prop	Type	Default	Description
`data`	`any[]`	—	Array of data objects to visualize
`margin`	`object`	—	Chart margins configuration
`className`	`string`	—	Additional CSS classes

ChartTooltipContent

Prop	Type	Default	Description
`indicator`	`'line' \| 'dot' \| 'dashed'`	`'dot'`	Visual indicator style
`hideLabel`	`boolean`	`false`	Hide the tooltip label
`hideIndicator`	`boolean`	`false`	Hide the visual indicator
`className`	`string`	—	Additional CSS classes