Ravox KitData
Chart
Bars, lines, area and stacked bars in custom SVG, on a single axis. Tooltip on pointer and keyboard arrows, legend, end-of-line label and the same numbers in a table. House colors tuned and validated for color blindness. No chart library.
- Receita
- Despesa
Use the left and right arrow keys to read each point, or the View table button.
Settings
Toggles
Examples
Stacked: the whole and its parts
- Site
- App
- Balcão
Use the left and right arrow keys to read each point, or the View table button.
One series, many points
Use the left and right arrow keys to read each point, or the View table button.
Fixed color per entity
- Despesa
- Marketing
Use the left and right arrow keys to read each point, or the View table button.
One series, no grid
Use the left and right arrow keys to read each point, or the View table button.
Installation
The command creates components/ui/chart.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add chartProps
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "bar" | "line" | "area" | "stacked" | "bar" | Bars compare categories; lines and area show time; stacked shows the whole and its parts. |
| data | T[] | — | One item per point on the X axis, with the numbers for each series: { mes: "jan", receita: 48200 }. |
| x | keyof T | — | The key of the X axis label (e.g. "mes"). |
| series | { key, label, color? }[] | — | Up to 4. Without color, they follow the order blue, yellow, pink, lime (the color stays with the series, not the position). |
| title | string | — | Visible title; also names the chart for screen readers. |
| description | string | — | Supporting line below the title (period, unit). |
| xLabel | string | — | Name of the X column in the table (e.g. "Month"). |
| height | number | 240 | Height of the chart area with the axes, in px. The width follows the available space. |
| format | (v: number) => string | — | Values in the tooltip, the table and at the end of the line (e.g. currency). |
| formatAxis | (v: number) => string | compact | Y axis numbers. Default: 1.2k, 3.4M. |
| legend | boolean | true com 2+ séries | Legend below the title. With a single series, the title already says what it is. |
| grid | boolean | true | Horizontal grid lines (the zero line is always there). |
| endLabel | boolean | true | Lines and area: the last value next to the end of the line. Disappears on its own when labels overlap. |
| tableToggle | boolean | true | "View table" button: the same numbers in a Table. |
| --grafico-azul · -amarelo · -rosa · -lima | CSS | — | Change the series colors in your CSS. The defaults are steps of the mosaic colors tuned for charts, validated for color blindness and with 3:1 contrast on the card in light and dark themes. |