Charts

Four lightweight SVG charts sharing one data shape:


type ChartDatum = { label: string; value: number; color?: string };

color (on a datum) matters for PieChart slices; the line/area/bar charts take a single color prop (defaults to the brand color).

LineChart


import { LineChart } from '@gg-software/ui';
 
<LineChart data={monthly} showDots showGrid />;

Prop	Type	Default	Description
`data`*	`ChartDatum[]`	—
`height`	`number`	`220`
`color`	`string`	`var(--color-brand)`
`area`	`boolean`	`false`	fill the area under the line
`showGrid`	`boolean`	`true`
`showDots`	`boolean`	`true`
`className`	`string`	—

* required · generated from packages/ui/src/data/charts/LineChart.tsx

A LineChart with the area pre-filled.


<AreaChart data={monthly} height={160} />

Prop	Type	Default
`data`*	`ChartDatum[]`	—
`height`	`number`	—
`color`	`string`	—
`showGrid`	`boolean`	—
`showDots`	`boolean`	—
`className`	`string`	—

* required · generated from packages/ui/src/data/charts/AreaChart.tsx


<BarChart data={perPackage} height={160} />

Prop	Type	Default
`data`*	`ChartDatum[]`	—
`height`	`number`	`220`
`color`	`string`	`var(--color-brand)`
`showGrid`	`boolean`	`true`
`className`	`string`	—

* required · generated from packages/ui/src/data/charts/BarChart.tsx

DirectSearchReferral


<PieChart data={sources} />
<PieChart donut size={140} data={usage} showLegend={false} />

Prop	Type	Default
`data`*	`ChartDatum[]`	—
`size`	`number`	`200`
`donut`	`boolean`	`false`
`showLegend`	`boolean`	`true`
`className`	`string`	—

* required · generated from packages/ui/src/data/charts/PieChart.tsx