TrendChart

@hua-labs/ui/data

v1.0.0

A line chart component for displaying trend data. Supports multiple series, area fills, and various color palettes.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { TrendChart } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Approved

Rejected

With Area Fill

Jan

Feb

Mar

Apr

May

Jun

Jul

Settlement

Multiple Series

Jan

Feb

Mar

Apr

May

Jun

Jul

Revenue

Expenses

Color Palettes

approval

settlement

Props

이름	타입	기본값	설명
`series*`	`TrendSeries[]`	-	Array of series data with label, data, color, and area options
`categories*`	`string[]`	-	Labels for the x-axis categories
`palette`	`"approval" \| "settlement" \| "custom"`	`"approval"`	Color palette preset
`height`	`number`	`200`	Chart height in pixels
`showLegend`	`boolean`	`true`	Whether to show the legend
`showDots`	`boolean`	`true`	Whether to show data points
`showTooltip`	`boolean`	`false`	Whether to show tooltips on hover

TrendSeries

Props

이름	타입	기본값	설명
`label*`	`string`	-	Series label for legend
`data*`	`number[]`	-	Array of data values
`color`	`string`	-	Custom color (hex or CSS color)
`area`	`boolean`	`false`	Whether to fill the area under the line

코드 예시

기본 사용법

BasicTrendChart.tsxtsx

import { TrendChart } from "@hua-labs/ui/data";

export function BasicTrendChart() {
  return (
    <TrendChart
      series={[
        { label: "Approved", data: [10, 20, 15, 30, 25, 35, 40] },
        { label: "Rejected", data: [5, 10, 8, 15, 12, 18, 14] }
      ]}
      categories={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
      palette="approval"
    />
  );
}

With Area Fill

TrendChartWithArea.tsxtsx

import { TrendChart } from "@hua-labs/ui/data";

export function TrendChartWithArea() {
  return (
    <TrendChart
      series={[
        {
          label: "Settlement",
          data: [100, 200, 150, 300, 250, 400, 350],
          area: true,
          color: "#6366f1"
        }
      ]}
      categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
      palette="settlement"
      showDots
      showTooltip
    />
  );
}

ProgressCard BarChartPro