1.0.2 • Published 2 years ago
uplot-react-js v1.0.2
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
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...