Charts
Bar chart
Entries by day
- Cars
- Motorcycles
bar-chart.tsx
"use client";
import { BarChart, ChartCard, SERIES } from "@waveinno/ui";
const WEEK = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"].map((day, i) => ({
day,
cars: 320 + ((i * 53) % 140),
bikes: 140 + ((i * 31) % 90),
}));
const trend = [
{ id: "cars", key: "cars", label: "Cars", color: SERIES[0] },
{ id: "bikes", key: "bikes", label: "Motorcycles", color: SERIES[1] },
];
export default function BarChartExample() {
return (
<ChartCard title="Entries by day" series={trend}>
<BarChart data={WEEK} xKey="day" series={trend} stacked />
</ChartCard>
);
}Import#
Everything comes from the package root. The example above uses:
your-component.tsx
import { BarChart, ChartCard, SERIES } from "@waveinno/ui";Props#
Read from the source of this version, so they match the code exactly.
<BarChart>
src/components/charts/bar-chart.tsx| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | Record<string, string | number>[] | — | |
xKeyrequired | string | — | |
seriesrequired | BarSeries[] | — | |
format | (v: number) => string | (v) => String(v) | |
stacked | boolean | — | |
horizontal | boolean | — |
<ChartCard>
src/components/charts/chart-card.tsx| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | |
description | string | — | |
series | SeriesMeta[] | — | |
action | React.ReactNode | — | |
childrenrequired | React.ReactNode | — | |
className | string | — | |
height | number | 240 |
Install#
If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.
$ npm install @waveinno/ui