チャート

依存関係のない SVG チャート（ジオメトリは @thl-ui/charts）。色はセマンティックトークンに従うため、スキンやダークモードに自動で適応します。高度なチャートが必要な場合は、任意のライブラリ（Chart.js、ECharts）を併用できます。

折れ線と棒

折れ線と棒

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 />

円とスパークライン

円とスパークライン

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" />

系列の形: { name: string; data: number[]; color?: string }。円グラフのデータ: { label, value, color? }[]。

API

LineChart

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

Prop	型	デフォルト
series*	array	—
labels*	array	—
height	number	280
area	boolean	—
smooth	boolean	true
legend	boolean	true

BarChart

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

Prop	型	デフォルト
series*	array	—
labels*	array	—
height	number	280
stacked	boolean	—
legend	boolean	true

PieChart

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

Prop	型	デフォルト
data*	array	—
size	number	220
donut	number	0.6
legend	boolean	true

スロット: center

Sparkline

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

Prop	型	デフォルト
data*	array	—
width	number	120
height	number	36
type	string	"line"
color	string	"primary"