Charts

Dependency-free SVG charts (geometry in @thl-ui/charts). Colors follow semantic tokens, so they adapt to skins and dark mode. For advanced charting, any library (Chart.js, ECharts) can be used alongside.

Line & bar

Line & bar

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

Pie & sparkline

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

Series shape: { name: string; data: number[]; color?: string }. Pie data: { label, value, color? }[].

API

LineChart

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

Prop	Type	Default
series*	array	—
labels*	array	—
height	number	280
area	boolean	—
smooth	boolean	true
legend	boolean	true

BarChart

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

Prop	Type	Default
series*	array	—
labels*	array	—
height	number	280
stacked	boolean	—
legend	boolean	true

PieChart

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

Prop	Type	Default
data*	array	—
size	number	220
donut	number	0.6
legend	boolean	true

Slots: center

Sparkline

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

Prop	Type	Default
data*	array	—
width	number	120
height	number	36
type	string	"line"
color	string	"primary"