Line Chart

Usage

Anatomy

Import the LineChart component and access all parts using dot notation.

import { LineChart } from "@thenamespace/uikit";

<LineChart>
  <LineChart.Grid />
  <LineChart.XAxis />
  <LineChart.YAxis />
  <LineChart.Line />
  <LineChart.Tooltip />
</LineChart>;

Dashed Comparison

"use client";

import { LineChart } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";

KPI With Chart

"use client";

import { LineChart } from "@thenamespace/uikit";
import { KPI } from "@thenamespace/uikit/kpi";
import { TrendChip } from "@thenamespace/uikit/trend-chip";

Multi Line Chart Colors

"use client";

import { LineChart } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";

Portfolio

"use client";

import React from "react";

import { LineChart } from "@thenamespace/uikit";

Sparkline

"use client";

import { LineChart } from "@thenamespace/uikit";

const sparkUp = [30, 35, 28, 42, 38, 45, 50, 48, 55, 60, 58, 65].map(

Stats With Chart

"use client";

import { LineChart } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";
import { Chip } from "@thenamespace/uikit/chip";

Traffic Source

"use client";

import { LineChart } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";

With Custom Tooltip

With Dots

"use client";

import { LineChart } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";

Custom Tooltip

"use client";

import { LineChart } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";
import { ChartTooltip } from "@thenamespace/uikit/chart-tooltip";

CSS Classes

Element Classes

• .line-chart — Root container wrapping ResponsiveContainer and the Recharts chart.

Recharts Theming

The following CSS rules target Recharts internal class names to apply Namespace UIKit design tokens automatically:

• .line-chart .recharts-cartesian-axis-tick-value — Axis tick labels. 10px muted text.
• .line-chart .recharts-cartesian-axis-line — Axis lines. Hidden by default.
• .line-chart .recharts-cartesian-axis-tick-line — Tick lines. Hidden by default.
• .line-chart .recharts-cartesian-grid line — Cartesian grid lines. Muted stroke at 0.15 opacity.
• .line-chart .recharts-tooltip-cursor — Tooltip cursor. Dashed vertical line on hover.
• .line-chart .recharts-active-dot circle — Active dot. Outlined with surface color for contrast.

API Reference

LineChart

The root wrapper. Renders a ResponsiveContainer + Recharts LineChart with Namespace UIKit CSS theming applied automatically.

Also supports all native div HTML attributes.

LineChart.Line

Re-exported Recharts Line component. Follows the Recharts Line API.

LineChart.XAxis

Re-exported Recharts XAxis component. Follows the Recharts XAxis API.

LineChart.YAxis

Re-exported Recharts YAxis component. Follows the Recharts YAxis API.

LineChart.Grid

Re-exported Recharts CartesianGrid component. Follows the Recharts CartesianGrid API.

LineChart.Tooltip

Re-exported Recharts Tooltip component. Follows the Recharts Tooltip API. Use with LineChart.TooltipContent for styled tooltips.

LineChart.TooltipContent

Pre-built tooltip renderer for Recharts. Pass as the content prop of LineChart.Tooltip. See ChartTooltip for full props.