uPlot | fast chart for time series | Data Visualization library
kandi X-RAY | uPlot Summary
kandi X-RAY | uPlot Summary
μPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 135ms, scaling linearly at ~25,000 pts/ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at ~40 KB, it's likely the smallest and fastest time series plotter that doesn't make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Plot rating .
- Update cursor position
- Plot bars in a series .
- Creates a new bars .
- Draws the axis of the chart
- Generate TimeStuff Spread
- Sets the scales
- Constructs a linear path .
- Catmculate the quadrant
- stack - stack
uPlot Key Features
uPlot Examples and Code Snippets
// 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 (
{}}
import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';
const Chart = () =>
( {}}
onDelete={(chart) => {}}
/>);
Community Discussions
Trending Discussions on uPlot
QUESTION
Because of the high rendering performance I am using uPlot to visualize historical sensor data. Is there a way to add horizontal reference lines like recommended min/max values for a data series? With other libraries that's often straight forward, like the ReferenceLine tag in recharts, but I haven't found anything yet with uPlot. Any hints?
Example: The orange dotted lines are the lower and upper acceptable bounds at 7.0 and 7.4. This image is rendered with recharts, but I want to migrate to uplot.
(There's a layer in front of the chart with the actual, min and max value which is totally independent of the chart.)
...ANSWER
Answered 2021-Nov-04 at 14:59I found an acceptable aproach based on two examples in the uPlog repository:
https://leeoniya.github.io/uPlot/demos/trendlines.html https://leeoniya.github.io/uPlot/demos/draw-hooks.html
The main idea is to handle one of the draw-hooks (draw, drawAxes, drawClear) and to directly drawing on the canvas.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install uPlot
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page