Small dependency-free SVG charts: BarChart for periods or categories, LineChart for a trend, AreaChart for a total that accumulates. One ink series (--text-1) and a quiet comparison (--n-04) on one value axis, hairline gridlines, mono tick labels. Hover or focus and use the arrow keys for a readout of every series at that point; the title and description name the chart for assistive tech, which also gets the data as a table. A legend appears only when there are two series. Bars grow from the baseline and lines fade in, both by transform and opacity, and not at all with reduced motion.
import { BarChart, LineChart, AreaChart } from "@puckoops/camelot";| Name | Description | Default | Control |
|---|---|---|---|
| data* | ChartDatum[] | - | |
| title* | Not drawn; names the chart string | - | |
| description | string | - | |
| seriesLabel | string | - | |
| comparisonLabel | string | - | |
| categoryLabel | Heads the first column of the data table, such as Month. string | - | |
| format | (value: number) => string | - | - |
| formatTick | Labels on the value axis; defaults to format. (value: number) => string | - | - |
| height | Axis labels included number | - | 140360240 |
| ticks | Roughly how many gridlines; the scale rounds to clean steps. number | - | 284 |
| legend | Shown by default when there is a comparison series, and never for one series. boolean | - | |
| className | string | - |
Use BarChart to compare periods or categories, LineChart for a trend over time, AreaChart for a total that accumulates. One ink series; the comparison (last year, the target) is always the quiet one. Always pass title; the legend appears only when there are two series. One value axis only: two measures of different scale are two charts.
One series needs no legend; the card's heading names it.
| Month | This year |
|---|---|
| Jan | £18,400 |
| Feb | £21,200 |
| Mar | £19,800 |
| Apr | £26,400 |
| May | £24,100 |
| Jun | £29,800 |
| Jul | £22,600 |
| Aug | £31,500 |
| Sep | £28,900 |
| Oct | £34,200 |
| Nov | £30,100 |
| Dec | £36,800 |
Thirty slots: bars thin out and the labels skip so they never collide.
| Month | Closed |
|---|---|
| 01 | 4 tasks |
| 02 | 6 tasks |
| 03 | 8 tasks |
| 04 | 10 tasks |
| 05 | 11 tasks |
| 06 | 7 tasks |
| 07 | 8 tasks |
| 08 | 8 tasks |
| 09 | 8 tasks |
| 10 | 8 tasks |
| 11 | 3 tasks |
| 12 | 3 tasks |
| 13 | 4 tasks |
| 14 | 4 tasks |
| 15 | 5 tasks |
| 16 | 1 tasks |
| 17 | 3 tasks |
| 18 | 4 tasks |
| 19 | 6 tasks |
| 20 | 8 tasks |
| 21 | 5 tasks |
| 22 | 7 tasks |
| 23 | 9 tasks |
| 24 | 10 tasks |
| 25 | 11 tasks |
| 26 | 7 tasks |
| 27 | 7 tasks |
| 28 | 7 tasks |
| 29 | 7 tasks |
| 30 | 7 tasks |
Bars below the baseline grow downward, with the rounded end at the bottom.
| Month | Margin |
|---|---|
| Jan | 12% |
| Feb | 8% |
| Mar | -4% |
| Apr | 6% |
| May | 14% |
| Jun | -9% |
| Jul | 3% |
| Aug | 11% |
| Sep | 7% |
A trend: the ink line over last year's quiet line, with a crosshair that snaps to the month.
| Month | This year | Last year |
|---|---|---|
| Jan | £18,400 | £16,200 |
| Feb | £21,200 | £17,900 |
| Mar | £19,800 | £18,600 |
| Apr | £26,400 | £20,100 |
| May | £24,100 | £22,800 |
| Jun | £29,800 | £21,400 |
| Jul | £22,600 | £19,700 |
| Aug | £31,500 | £24,300 |
| Sep | £28,900 | £25,100 |
| Oct | £34,200 | £27,600 |
| Nov | £30,100 | £26,900 |
| Dec | £36,800 | £29,400 |
The comparison can be a flat target.
| Month | Logged | Target |
|---|---|---|
| Mon | 7.5 hrs | 8 hrs |
| Tue | 8 hrs | 8 hrs |
| Wed | 6.5 hrs | 8 hrs |
| Thu | 9 hrs | 8 hrs |
| Fri | 5 hrs | 8 hrs |
A total that accumulates: an ink line over a faint ink wash, last year as a quiet line.
| Month | This year | Last year |
|---|---|---|
| Jan | £18,400 | £16,200 |
| Feb | £39,600 | £34,100 |
| Mar | £59,400 | £52,700 |
| Apr | £85,800 | £72,800 |
| May | £109,900 | £95,600 |
| Jun | £139,700 | £117,000 |
| Jul | £162,300 | £136,700 |
| Aug | £193,800 | £161,000 |
| Sep | £222,700 | £186,100 |
| Oct | £256,900 | £213,700 |
| Nov | £287,000 | £240,600 |
| Dec | £323,800 | £270,000 |
On a card: the heading carries the headline, the chart the shape.
Invoiced
| Month | This year | Last year |
|---|---|---|
| Jan | £18,400 | £16,200 |
| Feb | £21,200 | £17,900 |
| Mar | £19,800 | £18,600 |
| Apr | £26,400 | £20,100 |
| May | £24,100 | £22,800 |
| Jun | £29,800 | £21,400 |
| Jul | £22,600 | £19,700 |
| Aug | £31,500 | £24,300 |
| Sep | £28,900 | £25,100 |
| Oct | £34,200 | £27,600 |
| Nov | £30,100 | £26,900 |
| Dec | £36,800 | £29,400 |
All three charts on a 6 + 6 and a 7 + 5 row.
BarChart
| Category | This year | Last year |
|---|---|---|
| Jan | £18,400 | £16,200 |
| Feb | £21,200 | £17,900 |
| Mar | £19,800 | £18,600 |
| Apr | £26,400 | £20,100 |
| May | £24,100 | £22,800 |
| Jun | £29,800 | £21,400 |
| Jul | £22,600 | £19,700 |
| Aug | £31,500 | £24,300 |
| Sep | £28,900 | £25,100 |
| Oct | £34,200 | £27,600 |
| Nov | £30,100 | £26,900 |
| Dec | £36,800 | £29,400 |
LineChart
| Category | This year | Last year |
|---|---|---|
| Jan | £18,400 | £16,200 |
| Feb | £21,200 | £17,900 |
| Mar | £19,800 | £18,600 |
| Apr | £26,400 | £20,100 |
| May | £24,100 | £22,800 |
| Jun | £29,800 | £21,400 |
| Jul | £22,600 | £19,700 |
| Aug | £31,500 | £24,300 |
| Sep | £28,900 | £25,100 |
| Oct | £34,200 | £27,600 |
| Nov | £30,100 | £26,900 |
| Dec | £36,800 | £29,400 |
AreaChart
| Category | This year | Last year |
|---|---|---|
| Jan | £18,400 | £16,200 |
| Feb | £39,600 | £34,100 |
| Mar | £59,400 | £52,700 |
| Apr | £85,800 | £72,800 |
| May | £109,900 | £95,600 |
| Jun | £139,700 | £117,000 |
| Jul | £162,300 | £136,700 |
| Aug | £193,800 | £161,000 |
| Sep | £222,700 | £186,100 |
| Oct | £256,900 | £213,700 |
| Nov | £287,000 | £240,600 |
| Dec | £323,800 | £270,000 |
Single series
| Category | Value |
|---|---|
| Mon | 7.5 hrs |
| Tue | 8 hrs |
| Wed | 6.5 hrs |
| Thu | 9 hrs |
| Fri | 5 hrs |