Chart
Chart renders time-series data across multiple date range types (3 days, 5 work days, 7 week days, 12 months) with up to 3 data series and RTL support.
Loading preview…
1
'use client';2
3
import { BarChart } from 'sdaia-ui';4
5
export default function ChartRealWorld() {Installation
npx sdaia-ui@latest add chart
Usage
import { Chart } from "@/components/ui/chart"<Chart type="12-months" series={1} />Examples
Default
Chart showing data in default variant.
Loading preview…
1
<BarChart xAxisData="5 Work Days" seriesCount={1} />Types
Chart displaying data in different types of formats e.g 3 days, 5 days, 1 week, 12 months.
Loading preview…
1
<BarChart xAxisData="3 Days" seriesCount={1} />2
<BarChart xAxisData="5 Work Days" seriesCount={1} />3
<BarChart xAxisData="7 Week Days" seriesCount={1} />4
<BarChart xAxisData="12 Months" seriesCount={1} />Trends
Chart comparing Series 1 and Series 2 on 5 working days
Loading preview…
1
<BarChart xAxisData="5 Work Days" seriesCount={1} />2
<BarChart xAxisData="5 Work Days" seriesCount={2} />Multiple Series
Chart with multiple data series plotted simultaneously.
Loading preview…
1
<BarChart xAxisData="5 Work Days" seriesCount={3} />API Reference
BarChartProps
Props for the BarChart component.
Prop | Type | Default | Required |
|---|---|---|---|
xAxisData | '3 Days' | '5 Work Days' | '7 Week Days' | '12 Months' | '3 Days' | optional |
seriesCount | 1 | 2 | 3 | 1 | optional |
groups | BarChartDataPoint[] | - | optional |
yAxisValue | '3' | '6' | '9' | '3' | optional |
height | number | - | optional |
rtl | boolean | false | optional |