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

options:

data:

config:

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

Band

Scales

interface Scales {
		[key: string]: Scale;
	}