Linear Line Chart

Straight-line chart with linear interpolation and trend analysis. Built for React applications with Next.js integration and TypeScript support.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { CartesianGrid, Line, LineChart, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A linear line chart"const chartData = [  { month: "January", desktop: 186 },  { month: "February", desktop: 305 },  { month: "March", desktop: 237 },  { month: "April", desktop: 73 },  { month: "May", desktop: 209 },  { month: "June", desktop: 214 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },} satisfies ChartConfigexport function ChartLineLinear() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="text-center mb-4">        <h3 className="text-lg font-semibold">Line Chart - Linear</h3>        <p className="text-sm text-muted-foreground">January - June 2024</p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer config={chartConfig} className="w-full h-[250px]">          <LineChart            accessibilityLayer            data={chartData}            margin={{              left: 12,              right: 12,            }}          >            <CartesianGrid vertical={false} />            <XAxis              dataKey="month"              tickLine={false}              axisLine={false}              tickMargin={8}              tickFormatter={(value) => value.slice(0, 3)}            />            <ChartTooltip              cursor={false}              content={<ChartTooltipContent hideLabel />}            />            <Line              dataKey="desktop"              type="linear"              stroke="var(--color-desktop)"              strokeWidth={2}              dot={false}            />          </LineChart>        </ChartContainer>      </div>      <div className="flex flex-col gap-1 text-sm text-center mt-4">        <div className="flex items-center justify-center gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground flex items-center justify-center gap-2 leading-none">          Showing total visitors for the last 6 months        </div>      </div>    </div>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/line-chart-03.json

npx shadcn@latest add https://www.shadcn.io/registry/line-chart-03.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/line-chart-03.json

bunx shadcn@latest add https://www.shadcn.io/registry/line-chart-03.json

Features

Linear interpolation with straight line segments between data points
Sharp data transitions showing exact changes without curve smoothing
Trend indicator displaying percentage growth with visual icon
Clean tooltip display without label redundancy for focused data
TypeScript support with complete type definitions for all props
shadcn/ui integration using ChartContainer and design tokens

Use Cases

This free open source React component works well for:

Technical analysis - Display precise data changes without smoothing built with Next.js
Step-by-step tracking - Show exact transitions between measurement points using TypeScript and Tailwind CSS
Engineering metrics - Visualize system performance with linear precision
Scientific data - Present research findings with accurate point-to-point connections

API Reference

ChartLineLinear

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the container

Implementation Notes

Uses linear interpolation type for straight line segments
Component displays exact data transitions without curve smoothing
Data structure requires month field and numeric desktop values
Month names are automatically abbreviated to 3 characters
Best suited for data where precise point-to-point visualization is important