Line Chart

The LineChart component is a flexible line chart built with recharts. It supports multiple series, customizable dots, labels, tooltips, legends, Cartesian grid, and tick formatting.

import { LineChart } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
data	T[]	-	Array of data objects.
series	ChartConfig	-	Defines each line series with color, name, etc.
type	CurveType	"natural"	Line curve type (linear, monotoneX, natural, etc.)
dataKey	TypedDataKey<T, unknown>	-	Key used for X-axis.
showCursor	boolean	false	Show cursor line on hover.
hideXAxis	boolean	false	Hide X-axis.
hideYAxis	boolean	false	Hide Y-axis.
hideTooltipLabel	boolean	false	Hide label in tooltip.
showTickLine	boolean	false	Show tick lines on axes.
showAxisLine	boolean	false	Show axis lines.
showCartesianGrid	boolean	false	Show grid lines.
showLegend	boolean	false	Show legend.
tickMargin	number	8	Margin between tick labels and axes.
margin	Partial<Margin>	{ top: 20, left: 12, right: 12 }	Chart margin.
strokeWidth	number	2	Width of the line stroke.
dot	DotConfig	{ show: false, fill: "var(--color-background)", strokeWidth: 2, activeRadius: 6 }	Dot configuration for data points.
labelList	LabelListConfig	{ show: false, position: "top", offset: 12, fontSize: 12, fontWeight: "regular" }	Configuration for line labels.
className	string	-	Custom class for chart container.
tickFormatter	(value: unknown) => string	-	Custom function to format axis tick values.
wrapperClassName	string	-	Custom class for the outer wrapper.

Usage

Basic Example

const data = [
  { month: "Jan", mobile: 40, desktop: 30 },
  { month: "Feb", mobile: 35, desktop: 45 },
];

const series = {
  mobile: { color: "var(--color-primary)", name: "Mobile" },
  desktop: { color: "var(--color-success)", name: "Desktop" },
};

<LineChart data={data} series={series} dataKey="month" />;

With Dots

<LineChart
  data={data}
  series={series}
  dataKey="month"
  dot={{ show: true, fill: "#fff", strokeWidth: 3, activeRadius: 8 }}
/>;

With Labels

<LineChart
  data={data}
  series={series}
  dataKey="month"
  labelList={{ show: true, position: "top", fontSize: 12, fontWeight: "semibold" }}
/>;

With Cartesian Grid and Legend

<LineChart
  data={data}
  series={series}
  dataKey="month"
  showCartesianGrid
  showLegend
/>;

Custom Tick Formatter

<LineChart
  data={data}
  series={series}
  dataKey="month"
  tickFormatter={(val) => `$${val}`}
 />;

Multiple Series

<LineChart
  data={data}
  series={{
    mobile: { color: "var(--color-primary)", name: "Mobile" },
    desktop: { color: "var(--color-success)", name: "Desktop" },
  }}
  dataKey="month"
/>;

Features

• Supports multiple series with different colors.
• Customizable dots and active dots.
• Supports curve types (linear, natural, monotoneX, etc.).
• Optional Cartesian grid, legend, and tooltip.
• Customizable labels with font size, weight, style, and position.
• Axis tick formatting.

Notes

• dot and labelList can be combined for enhanced data visualization.
• series order determines line rendering order.
• Tooltip labels can be hidden individually using hideTooltipLabel.