Chart
Charts with the SmartUI look. The engine is Recharts; SmartUI sets shape, color and rules.
Bar
Bookings per dayLast 7 days
- Bookings
- Arrived
Horizontal bar
Top testsLast 7 days
- Bookings
Line
Attendance trendLast 7 days
- Bookings
- Arrived
Area
Booking volumeLast 7 days
- Bookings
- Arrived
Composed
Bookings and arrivalsLast 7 days
- Bookings
- Arrived
Pie
Test typesLast 7 days
- Lab
- MCU
- Vaccine
- Other
Donut
Test typesLast 7 days
- Lab
- MCU
- Vaccine
- Other
Radar
Service profileLast 7 days
- This month
- Last month
Radial
Target reachedLast 7 days
- Lab
- MCU
- Vaccine
- Other
Usage
import { Chart } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- One chart answers one question.
- Bar for comparing, line for change over time, donut for share of a whole.
When not to use
- More than four series in one chart.
- A donut with more than five slices.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'bar' | 'bar-horizontal' | 'line' | 'area' | 'composed' | 'pie' | 'donut' | 'radar' | 'radial' | 'bar' | |
data | Record<string, string | number | null>[] | required | |
series | { key, label, type? }[] | required | Series color follows a fixed order. |
xKey | string | 'name' | |
title | string | required | |
description | string | - | |
height | number | 220 |
Accessibility
- Give every chart a text summary nearby.
- Series are told apart by the legend and the tooltip, not only by color.