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(
    <StrictMode>
        <App />
    </StrictMode>
    );

After:
    ReactDOM.createRoot(document.getElementById('root'));
    root.render(
    <>
        <App />
    </>
    );

General

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

    const randomWidth = Math.random()*1000;
    const randomHeight = Math.random()*1000;

    <div style={{ width: randomWidth, height: randomHeight}}>
        <UPlot 
            data={data} 
            options={{
                ...options,
                autoResize: true
            }}
        />
    </div>

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 |

options:

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

data:

config:

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

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

Band

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

Scales

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