Ẏagr

Yagr is a high-performance HTML5 canvas chart renderer based on uPlot. It provides high-level features for uPlot charts.

Features

- Lines, areas, columns, and dots as visualization types. Configurable per series
- Configurable Legend Tooltip
- Axes with extra options for decimal-level precision
- Scales with configurable range functions and transformations
- Plot lines and bands. Configurable draw layer
- Responsive charts (requires ResizeObserver)
- High-level support of stacked areas/columns
- Configurable markers
- Light/Dark theme
- Data normalization
- Configurable crosshairs, cursor markers and snapping
- Typescript
- Localization
- CSS Variables in color names
- Paginated inline legend
- Error handling and extended hooks
- Data alignment and interpolation for missing data
- Realtime updates

Documentation

Quick Start

``
npm i @gravity-ui/yagr
`

$3

`typescript
import Yagr from '@gravity-ui/yagr';

new Yagr(document.body, {
timeline: [1, 2, 3, 4, 5],
series: [
{
data: [1, 2, 3, 4, 5],
color: 'red',
},
{
data: [2, 3, 1, 4, 5],
color: 'green',
},
],
});
`

$3

`html


`

$3

Need something specific? Yagr presents some useful examples in the demo/examples folder. How to start them with current version:

1. Clone the repository.
2. Install dependencies npm i.
3. Run npm run build.
4. Run npx http-server .`.
5. Open examples in browser according to the http-server output.