Graphics
Charts
Seventeen chart types, one line of code each
Q1
Q2
Q3
Q4
- Revenue
- Cost
Revenue181kCost90kMargin24k
Usage
import { BarChart } from "@gpuixui/data";
<BarChart
aria-label="Revenue against cost by quarter"
labels={["Q1", "Q2", "Q3", "Q4"]}
series={[
{ key: "revenue", label: "Revenue", values: [32, 48, 41, 60] },
{ key: "cost", label: "Cost", values: [18, 22, 26, 24] },
]}
/>;The seventeen
| Type | Draws |
|---|---|
BarChart | one bar per category, grouped or single |
StackedBar | categories stacked to their total |
LineChart | a trend per series, linear, smooth or step |
AreaChart | a filled trend, stacked or on its own |
ComposedChart | bars and lines on one axis |
ScatterChart | points, for correlation |
CandleChart | open, high, low and close |
FunnelChart | stages narrowing to a result |
PieChart · DonutChart | part-to-whole, as a ring |
RadarChart | a profile across axes |
RadialChart | concentric rings, as a gauge |
RadialBarChart | bars extending from the centre |
TreemapChart | a hierarchy, by area |
SankeyChart | a flow, by ribbon thickness |
SunburstChart | a hierarchy, by arc angle |
Sparkline | a trend in one line |
ChartLegend | the key beside any of them |
Edit this page on GitHubpackages/data/docs/charts/index.mdx