Documentation

1. Introduction

2. Getting Started

3. General

4. Configuration

5. 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.

`

data={data}
options={{
...options,
width: '720px',
height: '320px'
}}
/>

`






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;

data={data}
options={{
...options,
autoResize: true
}}
/>

`


Configuration

| STT | props | type | default | required |
| --- | ------------- | -------------------------- | ------------- | ------------- |
| 1 | id | string | none | no |
| 2 | options | options in UPlotProps | none | yes |
| 3 | data | data in UPlotProps | none | yes |
| 4 | configs | configs in UPlotProps | none | no |

$3

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 | none | |
| tzDate | function | tzDate | none | Converts a unix timestamp to Date that's time-adjusted for the desired timezone |
| fmtDate | function | 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 | coming soon... | coming soon... |
| bands | array | Band | | coming soon... |
| scales | array | 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 | 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... |

$3

Explore

$3

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.

$3

`
(ts: number) => Date
`

$3

`
(tpl: string) => (date: Date) => string
`

$3

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
}
`

$3

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 |

$3

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 |

$3

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...