TrendChart

v1.0.0

bash

npm install @hua-labs/hua

tsx

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

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


`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/advanced/dashboard";

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/advanced/dashboard";

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