المخطط الخطي

يُجسّد المخطط الخطي الاتجاهات والمقاييس باستخدام خطوط متّصلة عبر أنماط تخطيط تحليلية متنوّعة مع دعم RTL.

Loading demo: line-chart-real-world

التثبيت

npx sdaia-ui@latest add line-chart

import { LineChart } from "@/components/ui/line-chart"

<LineChart type="insight" />

Loading demo: line-chart-only-lines

مخطط خطي لإبراز اتجاهات البيانات والرؤى الرئيسية.

Loading demo: line-chart-insight

مخطط خطي بسلاسل متعددة لمقارنة مجموعات البيانات عبر الزمن.

Loading demo: line-chart-comparison

مخطط خطي مركَّز على تتبّع تغيّرات النتائج أو الأداء عبر الزمن.

Loading demo: line-chart-score

مخطط خطي مع منطقة توقّع مسقطة تمتدّ إلى ما بعد البيانات الحالية.

Loading demo: line-chart-forecast

خصائص مكوّن LineChart.

Prop	Type	Default	Required
type	'Insight' \| 'Comparison' \| 'Score' \| 'Forecast'	'Insight'	optional
xAxisData	XAxisDataType	'7 Week Days'	optional
rtl	boolean	false	optional
title	string	—	optional
height	number	—	optional
graphStyle	'noisy' \| 'smooth' \| 'elastic'	'smooth'	optional
showLegend	boolean	true	optional
legendPosition	'bottom-center' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'top-left' \| 'top-right'	'bottom-center'	optional
showYAxis	boolean	true	optional
showXAxis	boolean	true	optional
showGridLines	boolean	true	optional
showHoverIndicator	boolean	true	optional
showAreaFill	boolean	true	optional
series1Color	string	var(--color-line-chart-indicator-line)	optional
series2Color	string	rgba(165,123,186,1)	optional
series1	number[]	—	optional
series2	number[]	—	optional
goal	number	—	optional
past	number[]	—	optional
future	number[]	—	optional
splitIndex	number	—	optional
series1Label	string	—	optional
series2Label	string	—	optional
goalLabel	string	—	optional
forecastLabel	string	—	optional

جميع أنواع مؤشرات المخطط الخطي.

Loading demo: line-chart-indicator-all