Components / Chart
Chart
Pure SVG chart — bar, horizontal-bar, line, area, pie, donut. Animated entrance, tooltips, legend, grid. No external deps.
data-displayv0.1.0
Playground
Examples
Bar
<cg-chart contained type="bar" title="Revenue" subtitle="Q1 2026" style="max-width:420px;"></cg-chart>Horizontal Bar
<cg-chart contained type="horizontal-bar" title="Top Pages" style="max-width:420px;"></cg-chart>Line
<cg-chart contained type="line" title="Active Users" subtitle="Last 7 days" style="max-width:420px;"></cg-chart>Area
<cg-chart contained type="area" title="Traffic" subtitle="Weekly" style="max-width:420px;"></cg-chart>Pie
<cg-chart contained type="pie" title="Market Share" height="220" style="max-width:280px;"></cg-chart>Donut
<cg-chart contained type="donut" title="Expenses" height="220" style="max-width:280px;"></cg-chart>Import
import { CgChart } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-chart';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "bar" | "horizontal-bar" | "line" | "area" | "pie" | "donut" | "bar" | Chart type |
contained | boolean | false | Wrap in card container |
title | string | — | Chart title |
subtitle | string | — | Subtitle below title |
height | number | 200 | Chart height in px |
showLegend | boolean | true | Show legend below chart |
showValues | boolean | true | Show value labels on bars |
showGrid | boolean | true | Show grid lines |