Repository files navigation

A collection ofuPlot wrappers that allow you to work with charts declaratively inside 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

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.

SeeReact,Vue.js orSvelte sections below depending on what framework you're using.Also see APIdocumentation common to all frameworks.

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.

importReactfrom'react';importuPlotfrom'uplot';importUplotReactfrom'uplot-react';import'uplot/dist/uPlot.min.css';constChart=()=>(<UplotReactoptions={options}data={data}target={target}onCreate={(chart)=>{}}onDelete={(chart)=>{}}/>);

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

simple example for getting started quickly.ReactJS Demo

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

Using template

<template><UplotVue:data="data":options="options":target="target"@create="onCreate"@delete="onDelete"/></template><script>// Vue.js 2importVuefrom'vue';// Vue.js 3import{createApp}from'vue';importuPlotfrom'uplot';importUplotVuefrom'uplot-vue';import'uplot/dist/uPlot.min.css';// Vue.js 2constChart=Vue.extend({components:{uplotvue:UplotVue}});// Vue.js 3constChart=createApp({components:{uplotvue:UplotVue}});</script>

Using JSX

// Vue.js 2importVuefrom'vue';// Vue.js 3import{createApp}from'vue';importuPlotfrom'uplot';importUplotVuefrom'uplot-vue';import'uplot/dist/uPlot.min.css';{    ...,render(){return(<UplotVueoptions={options}data={data}target={target}onDelete={(chart)=>{}}onCreate={(chart)=>{}}/>);}}

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

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

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.

<script lang="ts">    import UplotSvelte from 'uplot-svelte';    import uPlot from 'uplot';    import 'uplot/dist/uPlot.min.css';    ...</script><UplotSvelte {options} {data} onCreate={onCreate} onDelete={onDelete} />

See the exampleSvelte 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