Interactive Line Chart

Visualize data trends with interactive line chart and metric switching. Built for React applications with Next.js integration and TypeScript support.

Recharts

Loading component...

"use client"import * as React from "react"import { CartesianGrid, Line, LineChart, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "An interactive line chart"const chartData = [  { date: "2024-04-01", desktop: 222, mobile: 150 },  { date: "2024-04-02", desktop: 97, mobile: 180 },  { date: "2024-04-03", desktop: 167, mobile: 120 },  { date: "2024-04-04", desktop: 242, mobile: 260 },  { date: "2024-04-05", desktop: 373, mobile: 290 },  { date: "2024-04-06", desktop: 301, mobile: 340 },  { date: "2024-04-07", desktop: 245, mobile: 180 },  { date: "2024-04-08", desktop: 409, mobile: 320 },  { date: "2024-04-09", desktop: 59, mobile: 110 },  { date: "2024-04-10", desktop: 261, mobile: 190 },  { date: "2024-04-11", desktop: 327, mobile: 350 },  { date: "2024-04-12", desktop: 292, mobile: 210 },  { date: "2024-04-13", desktop: 342, mobile: 380 },  { date: "2024-04-14", desktop: 137, mobile: 220 },  { date: "2024-04-15", desktop: 120, mobile: 170 },  { date: "2024-04-16", desktop: 138, mobile: 190 },  { date: "2024-04-17", desktop: 446, mobile: 360 },  { date: "2024-04-18", desktop: 364, mobile: 410 },  { date: "2024-04-19", desktop: 243, mobile: 180 },  { date: "2024-04-20", desktop: 89, mobile: 150 },  { date: "2024-04-21", desktop: 137, mobile: 200 },  { date: "2024-04-22", desktop: 224, mobile: 170 },  { date: "2024-04-23", desktop: 138, mobile: 230 },  { date: "2024-04-24", desktop: 387, mobile: 290 },  { date: "2024-04-25", desktop: 215, mobile: 250 },  { date: "2024-04-26", desktop: 75, mobile: 130 },  { date: "2024-04-27", desktop: 383, mobile: 420 },  { date: "2024-04-28", desktop: 122, mobile: 180 },  { date: "2024-04-29", desktop: 315, mobile: 240 },  { date: "2024-04-30", desktop: 454, mobile: 380 },  { date: "2024-05-01", desktop: 165, mobile: 220 },  { date: "2024-05-02", desktop: 293, mobile: 310 },  { date: "2024-05-03", desktop: 247, mobile: 190 },  { date: "2024-05-04", desktop: 385, mobile: 420 },  { date: "2024-05-05", desktop: 481, mobile: 390 },  { date: "2024-05-06", desktop: 498, mobile: 520 },  { date: "2024-05-07", desktop: 388, mobile: 300 },  { date: "2024-05-08", desktop: 149, mobile: 210 },  { date: "2024-05-09", desktop: 227, mobile: 180 },  { date: "2024-05-10", desktop: 293, mobile: 330 },  { date: "2024-05-11", desktop: 335, mobile: 270 },  { date: "2024-05-12", desktop: 197, mobile: 240 },  { date: "2024-05-13", desktop: 197, mobile: 160 },  { date: "2024-05-14", desktop: 448, mobile: 490 },  { date: "2024-05-15", desktop: 473, mobile: 380 },  { date: "2024-05-16", desktop: 338, mobile: 400 },  { date: "2024-05-17", desktop: 499, mobile: 420 },  { date: "2024-05-18", desktop: 315, mobile: 350 },  { date: "2024-05-19", desktop: 235, mobile: 180 },  { date: "2024-05-20", desktop: 177, mobile: 230 },  { date: "2024-05-21", desktop: 82, mobile: 140 },  { date: "2024-05-22", desktop: 81, mobile: 120 },  { date: "2024-05-23", desktop: 252, mobile: 290 },  { date: "2024-05-24", desktop: 294, mobile: 220 },  { date: "2024-05-25", desktop: 201, mobile: 250 },  { date: "2024-05-26", desktop: 213, mobile: 170 },  { date: "2024-05-27", desktop: 420, mobile: 460 },  { date: "2024-05-28", desktop: 233, mobile: 190 },  { date: "2024-05-29", desktop: 78, mobile: 130 },  { date: "2024-05-30", desktop: 340, mobile: 280 },  { date: "2024-05-31", desktop: 178, mobile: 230 },  { date: "2024-06-01", desktop: 178, mobile: 200 },  { date: "2024-06-02", desktop: 470, mobile: 410 },  { date: "2024-06-03", desktop: 103, mobile: 160 },  { date: "2024-06-04", desktop: 439, mobile: 380 },  { date: "2024-06-05", desktop: 88, mobile: 140 },  { date: "2024-06-06", desktop: 294, mobile: 250 },  { date: "2024-06-07", desktop: 323, mobile: 370 },  { date: "2024-06-08", desktop: 385, mobile: 320 },  { date: "2024-06-09", desktop: 438, mobile: 480 },  { date: "2024-06-10", desktop: 155, mobile: 200 },  { date: "2024-06-11", desktop: 92, mobile: 150 },  { date: "2024-06-12", desktop: 492, mobile: 420 },  { date: "2024-06-13", desktop: 81, mobile: 130 },  { date: "2024-06-14", desktop: 426, mobile: 380 },  { date: "2024-06-15", desktop: 307, mobile: 350 },  { date: "2024-06-16", desktop: 371, mobile: 310 },  { date: "2024-06-17", desktop: 475, mobile: 520 },  { date: "2024-06-18", desktop: 107, mobile: 170 },  { date: "2024-06-19", desktop: 341, mobile: 290 },  { date: "2024-06-20", desktop: 408, mobile: 450 },  { date: "2024-06-21", desktop: 169, mobile: 210 },  { date: "2024-06-22", desktop: 317, mobile: 270 },  { date: "2024-06-23", desktop: 480, mobile: 530 },  { date: "2024-06-24", desktop: 132, mobile: 180 },  { date: "2024-06-25", desktop: 141, mobile: 190 },  { date: "2024-06-26", desktop: 434, mobile: 380 },  { date: "2024-06-27", desktop: 448, mobile: 490 },  { date: "2024-06-28", desktop: 149, mobile: 200 },  { date: "2024-06-29", desktop: 103, mobile: 160 },  { date: "2024-06-30", desktop: 446, mobile: 400 },]const chartConfig = {  views: {    label: "Page Views",  },  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },  mobile: {    label: "Mobile",    color: "var(--chart-2)",  },} satisfies ChartConfigexport function ChartLineInteractive() {  const [activeChart, setActiveChart] =    React.useState<keyof typeof chartConfig>("desktop")  const total = React.useMemo(    () => ({      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),    }),    []  )  return (    <div className="w-full h-full flex flex-col p-4">      <div className="flex flex-col items-stretch border-b pb-4 mb-4 sm:flex-row">        <div className="flex flex-1 flex-col justify-center gap-1">          <h3 className="text-lg font-semibold">Line Chart - Interactive</h3>          <p className="text-sm text-muted-foreground">            Showing total visitors for the last 3 months          </p>        </div>        <div className="flex mt-4 sm:mt-0">          {["desktop", "mobile"].map((key) => {            const chart = key as keyof typeof chartConfig            return (              <button                key={chart}                data-active={activeChart === chart}                className="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"                onClick={() => setActiveChart(chart)}              >                <span className="text-muted-foreground text-xs">                  {chartConfig[chart].label}                </span>                <span className="text-lg leading-none font-bold sm:text-3xl">                  {total[key as keyof typeof total].toLocaleString()}                </span>              </button>            )          })}        </div>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer          config={chartConfig}          className="h-[250px] w-full"        >          <LineChart            accessibilityLayer            data={chartData}            margin={{              left: 12,              right: 12,            }}          >            <CartesianGrid vertical={false} />            <XAxis              dataKey="date"              tickLine={false}              axisLine={false}              tickMargin={8}              minTickGap={32}              tickFormatter={(value) => {                const date = new Date(value)                return date.toLocaleDateString("en-US", {                  month: "short",                  day: "numeric",                })              }}            />            <ChartTooltip              cursor={false}              content={                <ChartTooltipContent                  className="w-[150px]"                  nameKey="views"                  labelFormatter={(value) => {                    return new Date(value).toLocaleDateString("en-US", {                      month: "short",                      day: "numeric",                      year: "numeric",                    })                  }}                />              }            />            <Line              dataKey={activeChart}              type="monotone"              stroke={`var(--color-${activeChart})`}              strokeWidth={2}              dot={false}            />          </LineChart>        </ChartContainer>      </div>    </div>  )}

Installation

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

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

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

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

Features

Interactive data switching with desktop/mobile toggle buttons showing totals
Smooth line animations using Recharts with monotone curve interpolation
Responsive design with adaptive layout and max-width container
Custom tooltips showing data points on hover with formatted dates
TypeScript support with complete type definitions for all props
shadcn/ui integration using Card, ChartContainer, and design tokens

Use Cases

This free open source React component works well for:

Analytics dashboards - Display website traffic or user engagement metrics built with Next.js
Performance monitoring - Track KPIs with interactive data series switching using TypeScript and Tailwind CSS
Comparison analysis - Switch between different metrics in a single visualization
Business reporting - Compare desktop vs mobile performance over time

API Reference

ChartLineInteractive

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

Implementation Notes

Place component within a container with defined width (max-width: 4xl)
Chart automatically adjusts height to 250px with responsive padding
Data structure requires date field and numeric values for each series
Interactive buttons show calculated totals for each data series
Uses Recharts for charting functionality with shadcn/ui styling