Biểu đồ

Biểu đồ SVG không phụ thuộc thư viện (phần hình học nằm trong @thl-ui/charts). Màu theo token ngữ nghĩa nên tự đổi theo skin và dark mode. Khi cần biểu đồ phức tạp hơn vẫn có thể dùng kèm thư viện khác (Chart.js, ECharts).

Đường & cột

Đường & cột

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-lg-6"><ThlCard title="Sales overview"><ThlLineChart :series="salesSeries" :labels="months" area :height="260" /></ThlCard></div>
  <div class="thl-col-12 thl-col-lg-6"><ThlCard title="Yearly"><ThlBarChart :series="yearlySeries" :labels="years" :height="260" /></ThlCard></div>
</div>

React

<LineChart series={salesSeries} labels={months} area height={260} valueFormat={(v) => t.n(v)} />
<BarChart series={yearlySeries} labels={years} stacked />

Angular

<thl-line-chart [series]="salesSeries" [labels]="months" area [height]="260" />
<thl-bar-chart [series]="yearlySeries" [labels]="years" stacked />

Tròn & sparkline

Tròn & sparkline

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlCard title="Visitors"><ThlPieChart :data="donut"><template #center><b style="font-size:22px;color:var(--thl-heading)">8,452</b><small>Total</small></template></ThlPieChart></ThlCard></div>
  <div class="thl-col-12 thl-col-md-6"><ThlCard title="Sparklines"><div class="thl-stack"><ThlSparkline :data="spark[0]" :width="200" :height="40" /><ThlSparkline :data="spark[1]" type="bar" color="success" :width="200" :height="40" /><ThlSparkline :data="spark[2]" type="area" color="danger" :width="200" :height="40" /></div></ThlCard></div>
</div>

React

<PieChart data={donut} donut={0.6} center={<b>8,452</b>} />
<Sparkline data={[5, 6, 2, 8, 9]} type="bar" color="success" width={200} height={40} />

Angular

<thl-pie-chart [data]="donut" [donut]="0.6" />
<thl-sparkline [data]="[5, 6, 2, 8, 9]" type="bar" color="success" [width]="200" [height]="40" />

Cấu trúc series: { name: string; data: number[]; color?: string }. Dữ liệu biểu đồ tròn: { label, value, color? }[].

API

LineChart

<ThlLineChart> · import { ThlLineChart } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
series*	array	—
labels*	array	—
height	number	280
area	boolean	—
smooth	boolean	true
legend	boolean	true

BarChart

<ThlBarChart> · import { ThlBarChart } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
series*	array	—
labels*	array	—
height	number	280
stacked	boolean	—
legend	boolean	true

PieChart

<ThlPieChart> · import { ThlPieChart } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
data*	array	—
size	number	220
donut	number	0.6
legend	boolean	true

Slot: center

Sparkline

<ThlSparkline> · import { ThlSparkline } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
data*	array	—
width	number	120
height	number	36
type	string	"line"
color	string	"primary"