Chart

A versatile chart component built on Recharts that supports various chart types like line, bar, area, and pie charts.

How to Import

Add this import to your component file

app/page.tsx

1import { Chart } from "@/components/lightswind/chart"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

type	"line" \| "bar" \| "area" \| "pie" \| "radar"	-	Type of chart to render	Required
data	object[]	-	Array of data objects for the chart	Required
xAxis	string	-	Key in the data objects to use for the x-axis	Required
series	object[]	-	Array of series configurations	Required
height	number	400	Height of the chart	Optional
width	number	600	Width of the chart	Optional
legend	boolean	false	Whether to display the legend	Optional
className	string	-	Additional CSS classes to apply to the chart	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Chart } from "@/components/lightswind/chart";
2
3export function LineChartExample() {
4  const data = [
5    { name: 'Jan', value: 400 },
6    { name: 'Feb', value: 300 },
7    { name: 'Mar', value: 600 },
8    { name: 'Apr', value: 800 },
9    { name: 'May', value: 500 },
10    { name: 'Jun', value: 900 },
11  ];
12
13  return (
14    <Chart 
15      type="line" 
16      data={data}
17      xAxis="name"
18      series={[{ key: "value", name: "Revenue" }]}
19      height={300}
20    />
21  );
22}

Variants

Different visual and behavioral variants of the component

Area Chart Variant

A natural stacked area chart displaying trend volume analytics over monthly ranges.

Interactive Area Chart

Monochrome visual analytics overview

Previouscarousel

Nextcollapsible

A product byＭＵＨＩＬＡＮ and Team❤️.

Chart

A versatile chart component built on Recharts that supports various chart types like line, bar, area, and pie charts.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Chart } from "@/components/lightswind/chart"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

type	"line" \| "bar" \| "area" \| "pie" \| "radar"	-	Type of chart to render	Required
data	object[]	-	Array of data objects for the chart	Required
xAxis	string	-	Key in the data objects to use for the x-axis	Required
series	object[]	-	Array of series configurations	Required
height	number	400	Height of the chart	Optional
width	number	600	Width of the chart	Optional
legend	boolean	false	Whether to display the legend	Optional
className	string	-	Additional CSS classes to apply to the chart	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Chart } from "@/components/lightswind/chart";
2
3export function LineChartExample() {
4  const data = [
5    { name: 'Jan', value: 400 },
6    { name: 'Feb', value: 300 },
7    { name: 'Mar', value: 600 },
8    { name: 'Apr', value: 800 },
9    { name: 'May', value: 500 },
10    { name: 'Jun', value: 900 },
11  ];
12
13  return (
14    <Chart 
15      type="line" 
16      data={data}
17      xAxis="name"
18      series={[{ key: "value", name: "Revenue" }]}
19      height={300}
20    />
21  );
22}

Variants

Different visual and behavioral variants of the component

Area Chart Variant

A natural stacked area chart displaying trend volume analytics over monthly ranges.

Interactive Area Chart

Monochrome visual analytics overview

Previouscarousel

Nextcollapsible

A product byＭＵＨＩＬＡＮ and Team❤️.

Chart

How to Import

Props

Basic Usage

Variants

Area Chart Variant

Interactive Area Chart

On This Page

Contribute

Chart

How to Import

Props

Basic Usage

Variants

Area Chart Variant

Interactive Area Chart

On This Page

Contribute

React Chart Component - Lightswind UI

Key Details of React Chart

Chart

How to Import

Props

Basic Usage

Variants

Area Chart Variant

Interactive Area Chart

On This Page

Contribute

Chart

How to Import

Props

Basic Usage

Variants

Area Chart Variant

Interactive Area Chart

On This Page

Contribute