uplot-react v1.1.5

uplot-react

React wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework.

Table of Contents

• Motivation
• React
  • Installation
  • How to use
  • Demo
• Documentation

Motivation

While several other uPlot wrappers already exist, all of them have one of the following limitations: 1. They create uPlot instance once, during component mount phase, and expect you to handle all the update logic yourself. 2. They recreate uPlot instance anew whenever the props change, even if the instance can be updated to reflect the changes.

In comparison this library tries it's best not to recreate the uPlot instance once the props change. Instead of recreation it tries to use uPlot public API to keep it up to date with the props.

React

Installation

Install uplot-react package with uplot dependency:

• Using npm: $ npm install uplot-react uplot
• Using yarn: $ yarn add uplot-react uplot

You also need React 16.8 or above to be installed inside your project tree.

How to use

import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';

const Chart = () =>
    (<UplotReact
        options={options}
        data={data}
        target={target}
        onCreate={(chart) => {}}
        onDelete={(chart) => {}}
    />);

Demo

See the live demo

You can also run the demo app locally:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveReact

Documentation