Multi-series trends and rates — conversion, win rate, turnover. Point markers (none / last / all), step curves and direct end labels that do not rely on colour.
Sep 7 – Oct 19. Pricing page: low 6.4% (Sep 21), high 8.8% (Oct 19), average 8%. Landing pages: low 3.9% (Sep 21), high 5.5% (Oct 19), average 5%. Blog: low 1.1% (Sep 7), high 1.8% (Oct 19), average 1%.
| Week | Pricing page | Landing pages | Blog |
|---|---|---|---|
| Sep 7, 2026 | 6.7% | 4.2% | 1.1% |
| Sep 14, 2026 | 7.1% | 4.5% | 1.2% |
| Sep 21, 2026 | 6.4% | 3.9% | 1.4% |
| Sep 28, 2026 | 7.6% | 4.8% | 1.3% |
| Oct 5, 2026 | 7.9% | 5.1% | 1.6% |
| Oct 12, 2026 | 8.3% | 4.9% | 1.5% |
| Oct 19, 2026 | 8.8% | 5.5% | 1.8% |
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { LineChart } from "@vamos-ui/react/charts";
<LineChart title="Win rate" data={rows} x="month" config={{ maya: { label: "Maya", format: "percent" } }} endLabels />More than 6 series logs a development hint (group into Other or use small multiples).
Examples
Direct labels (CRM)
endLabels writes each series name at its last point and drops the legend; recommended from 3 series.
May – Oct. Maya: low 31% (May), high 39% (Oct), average 35%. Priya: low 26% (Jun), high 36% (Oct), average 32%. Diego: low 24% (May), high 31% (Sep), average 28%. Tom: low 19% (May), high 27% (Oct), average 23%.
| Month | Maya | Priya | Diego | Tom |
|---|---|---|---|---|
| May | 31% | 28% | 24% | 19% |
| Jun | 34% | 26% | 27% | 22% |
| Jul | 33% | 31% | 29% | 21% |
| Aug | 37% | 33% | 28% | 25% |
| Sep | 36% | 35% | 31% | 24% |
| Oct | 39% | 36% | 30% | 27% |
Step (price changes)
curve="step" for values that change in jumps; dots="all" marks every change.
Jan 1 – Oct 1. Business seat: low $79.00 (Jan 1), high $99.00 (Oct 1), average $85.67. Team seat: low $29.00 (Jan 1), high $35.00 (Aug 1), average $32.00.
| Date | Business seat | Team seat |
|---|---|---|
| Jan 1, 2026 | $79.00 | $29.00 |
| Mar 1, 2026 | $79.00 | $29.00 |
| Apr 15, 2026 | $79.00 | $32.00 |
| Jun 1, 2026 | $89.00 | $32.00 |
| Aug 1, 2026 | $89.00 | $35.00 |
| Oct 1, 2026 | $99.00 | $35.00 |
API
LineChart
| Prop | Type | Default |
|---|---|---|
…Chart propsSee Chart frame. | ChartProps | — |
seriesKeys to draw. | string[] | — |
curveInterpolation. | "monotone" | "linear" | "step" | "monotone" |
dotsPoint markers. | "none" | "last" | "all" | "last" |
endLabelsDirect labels at line ends instead of a legend (≤ 4 series). | boolean | false |
referenceReference lines. | { y, label?, color? }[] | — |