uPlot wrappers

A collection of uPlot wrappers that enable you to work with charts declaratively within your favorite framework.

Table of Contents

• Motivation
• Getting started
• React
• Installation
• How to use
• Demo
• Vue.js
• Installation
• How to use
• Demo
• Svelte
• Installation
• How to use
• Demo
• Documentation

Motivation

Although several other uPlot wrappers already exist, all of them have one of the following limitations:

• They create a uPlot instance once during the component mount phase and expect you to handle all the update logic yourself.
• They recreate the uPlot instance entirely whenever the props change, even if the instance could simply be updated to reflect the changes.

In contrast, this library does its best not to recreate the uPlot instance when the props change. Instead of recreating, it attempts to use the uPlot public API to keep it updated with the props.

Getting started

Refer to the React, Vue.js or Svelte sections below, depending on the framework you're using. Also see the API documentation that is common to all frameworks.

React

Installation

Install the uplot-react package along with the uplot dependency:

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

You also need to have React 16.8 or above installed within 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 = () => (
     {}} 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

ReactJS Demo

simple example for getting started quickly. ReactJS Demo

Vue.js

Installation

Install uplot-vue package with uplot dependency:

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

You also need Vue.js to be installed inside your project tree (both 2.6 and 3.x versions are supported).

How to use

Using template

Using JSX

// Vue.js 2
import Vue from 'vue';
// Vue.js 3
import { createApp } from 'vue';
import uPlot from 'uplot';
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';
{
    ...,
    render() {
        return (
             {}}
                onCreate={(chart) => {}}
            />
        );
    }
}

Note: Property changes by mutation are not supported due to Vue limitation You have to create a copy of the property, i.e. replace it instead, see an example for the general idea.

Demo

See the Vue.js 2 live demo

You can also run the demo app locally:

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

$ cd uplot-wrappers && yarn install

Vue.js 2:

$ yarn run serveVue

Vue.js 3:

$ yarn run serveVue3

Svelte

Installation

Install uplot-svelte package with uplot dependency:

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

You also need Svelte to be installed inside your project tree. UplotSvelte component is compatible with Svelte and SvelteKit projects.

How to use

Demo

See the example Svelte example

You can also run the demo app locally:

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

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

Documentation

| Parameter | Requirement | Description | | :-------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | required | Options for uPlot. Passed as the first argument to uPlot constructor: new uPlot(options) | | data | required | Data for uPlot. Passed as the second argument to uPlot constructor: new uPlot(options, data) | | target | optional | Target html element for uPlot. Passed as the third argument to uPlot constructor: new uPlot(options, data, target) A new div target element will be created automatically if none is passed in the props | | onCreate | optional | Callback function, invoked upon uPlot instance creation or recreation | | onDelete | optional | Callback function, invoked before uPlot instance gets destroyed, either because the props has changed so much it's impossible to update the chart or because the component is about to be unmounted | | className/class | optional | A class name passed over to the automatically created target div element. Class name is ignored when the 'target' prop is used. | | resetScales | optional | Flag controlling whether to reset the scales on data change. Defaults to true. |

--- Tranlated By Open Ai Tx | Last indexed: 2025-09-25 ---