Tile UI Vue
Source code

Components

Chart

Chart primitives.

Use ChartContainer to render line, bar, and area charts from a config.

Monthly device trafficJanFebMarApr
Desktop
Mobile
import { ChartContainer } from '@tile-ui/vue';
 
export default function ChartDemo() {
	return (
		<ChartContainer
			title="Monthly device traffic"

Registry install

pnpm dlx shadcn@latest add @tile-ui/chart

Package usage

import { ChartContainer } from '@tile-ui/vue';
 
<ChartContainer
	config={{ desktop: { label: "Desktop" } }}
	data={[{ x: "Jan", desktop: 100 }]}
	xKey="x"
	type="line"
/>

Highlights

  • Line, bar, and area
  • Legend and tooltip
  • Light and dark themes

Registry dependencies

Item Purpose
chart Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

ChartContainer

Prop Type Default
config Record<string, ChartConfigItem> —
data ChartDatum[] —
xKey string —
series ChartSeriesItem[] —
type 'line' | 'bar' | 'area' —
initialDimension { width: number; height: number } —
showLegend boolean —
showTooltip boolean —
showGrid boolean —
showAxis boolean —
PreviousCarouselNextCheckbox