Documentation
1. [Introduction](#Introduction)
2. [Getting Started](#Getting_Started)
3. [General](#General)
4. [Configuration](#Configuration)
5. [Axes](#Axes)
## Introduction
This is Wrapper component for uplot library (A small (~40 KB min), fast chart for time series, lines, areas, ohlc & bars).
## Getting_Started
Install:
```
npm i uplot-react-js
or
yarn add uplot-react-js
```
First you need remove Strict Mode in index(.tsx | .ts) or index(.jsx | .js) files
```
Before:
ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
After:
ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
);
```
## General
BASIC
a) By default you must insert width and height into options property.
```
```
AUTO RESIZE
b) If you don't like it and you wan't to auto resize chart by parent element,
you can insert autoResize = true in configs property. And chart auto resize by parent element
```
const randomWidth = Math.random()*1000;
const randomHeight = Math.random()*1000;
```
Explore
| Name | Type | ItemValue | Default | Description |
| --- | ------ | --------- | ------ | ------ |
| mode | number | 1 or 2 | 1 | 1: aligned & ordered, single-x / y-per-series,
2: unordered & faceted, per-series/per-point x,y,size,label,color,shape,etc. |
| title | string | | none | chart title |
| id | string | | none | id of chart uplot canvas |
| class | string | | none | className to add to chart uplot canvas |
| width | number | | none | width of chart |
| height | number | | none | height of chart |
| data | object | [AlignedData](#AlignedData) | none | |
| tzDate | function | [tzDate](#tzDate) | none | Converts a unix timestamp to Date that's time-adjusted for the desired timezone |
| fmtDate | function | [fmtDate](#fmtDate) | none | Creates an efficient formatter for Date objects from a template string, e.g. {YYYY}-{MM}-{DD} */ |
| ms | number | 1e-3 or 1 | 1e-3 | timestamp multiplier that yields 1 millisecond |
| drawOrder | array | 'axes' or 'series' | ["axes", "series"] | drawing order for axes/grid & series |
| pxAlign | boolean or number | | true | whether vt & hz lines of series/grid/ticks should be crisp/sharp or sub-px antialiased |
| series | array | [Series](#Series) | coming soon... | coming soon... |
| bands | array | [Band](#Band) | | coming soon... |
| scales | array | [Scales](#Scales) | coming soon... | coming soon... |
| axes | uplot.Axis[] | coming soon... | coming soon... | coming soon... |
| padding | uplot.Padding| | [top: PaddingSide, right: PaddingSide, bottom: PaddingSide, left: PaddingSide] | coming soon... |
| select | uplot.Select | [Select](#uplot.select) | coming soon... | coming soon... |
| legend | uplot.Legend | coming soon... | coming soon... | coming soon... |
| cursor | uplot.Cursor | coming soon... | coming soon... | coming soon... |
| focus | uplot.Focus | coming soon... | coming soon... | coming soon... |
| hooks | uplot.Hooks[] | coming soon... | coming soon... | coming soon... |
| plugins | uplot.Plugin[] | coming soon... | coming soon... | coming soon... |
Explore
Explore
Item Details:
#### AlignedData
In options.mode = 1, per xValue correspond with per yValue
```
{
xValues: number[] | string[],
yValues: any[]
}
```
NOTE: if xValues is time, it default is seconds, if you don't like it, you can config with ms in options config.
### tzDate
```
(ts: number) => Date
```
### fmtDate
```
(tpl: string) => (date: Date) => string
```
### uplot.select
div into which .u-select will be placed: .u-over or .u-under
```
{
show?: boolean;
left: number;
top: number;
width: number;
height: number;
over?: boolean; // default true
}
```
### Series
Explore
This is object control yaxes, line style, point style,...
| Name | Type | ItemValue | Default | Description |
| --- | ------ | --------- | ------ | ------ |
| show | boolean or function | | | if boolean or func returns boolean (this func is have 4 params: uplotSelf,seriesIdx,idx0,idx1), round points are drawn with defined options, else fn should draw own custom points via self |
| paths | function | | | (self: uPlot, seriesIdx: number, idx0: number, idx1: number, filtIdxs?: number[] or null) => Paths or null |
| filter | Points.Filter | | | may return an array of points indices to draw Points.Filter = number[] or null or ((self: uPlot, seriesIdx: number, show: boolean, gaps?: null or number[][]) => number[] or null) |
| size | number | | | diameter of point in CSS pixels |
| space | number | | size * 2 | minimum avg space between point centers before they're shown |
| width | number | | | line width of circle outline in CSS pixels |
| stroke | Stroke | coming soon... | coming soon... | line color of circle outline (defaults to series.stroke) |
| dash | array | number | | line dash segment array |
| dash | Series.Cap | coming soon... | coming soon... | line cap|
| fill | Fill | coming soon... | #fff | fill color of circle |
Explore
| Name | Type | ItemValue | Default | Description |
| --- | ------ | --------- | ------ | ------ |
| show | boolean | true or false | false | band on/off |
| series | array | [fromSeriesIdx: number, toSeriesIdx: number] | | series indices of upper and lower band edges |
| fill | coming soon... | | | area fill style |
| dir | number | 1 or -1 | | whether to fill towards yMin (-1) or yMax (+1) between "from" & "to" series |
Explore
this is object:
```
interface Scales {
[key: string]: Scale;
}
```
Scale have properties:
| Name | Type | ItemValue | Default | Description |
| --- | ------ | --------- | ------ | ------ |
| time | boolean | | | is this scale temporal, with series' data in UNIX timestamps? |
| auto | boolean or function | | | | determines whether all series' data on this scale will be scanned to find the full min/max range. ((self: uPlot, resetScales: boolean) => boolean) |
| range | [min: number or null, max: number or null] or (self: uPlot, initMin: number, initMax: number, scaleKey: string) => MinMax or {min: Range.Limit;max: Range.Limit;} | | | area fill style |
More info...
