📈 A small, fast chart for time series, lines, areas, ohlc & bars

Adds a scales array option to the cursor.sync of the signature [xKey, yKey] (default [null, null]) and includes a new demo showcasing functionality.

#215

in the candelstick demo, if you use mouse to zoom, sometimes the edge ticks would be excluded or missed. or if you hold the mouse left button and swing the mouse out of canvas, the selection range could be random. ideally, when mouse cursor is out of range, every ticks along that direction should be included?

Hey @leeoniya :wave: Since this commit from v1.4.0, all the types/interfaces related to uPlot are no longer in a namespace:

Before

import uPlot from 'uplot'

const axisStyles: uPlot.Axis = {
    font: `500 12px ${htmlStyles.fontFamily}`,
    stroke: htmlStyles.color,
    grid: { stroke: 'rgba(0,0,0, 0.05)' },
    ticks: { show: false }
}

const plot = new uPlot()

After

 // Loss of information about where the Axis type comes from.
import uPlot from 'uplot'
import type { Axis } from 'uplot'

const axisStyles: Axis = {
}

const plot = new uPlot()

or

// Having to import uplot twice.
import uPlot from 'uplot'
import type * as uPlotTypes from 'uplot'

const axisStyles: uPlotTypes.Axis = {
}

const plot = new uPlot()

or

// This is the closest to where we had before, but having to access the
// `default` export for the constructor is not good.
import * as uPlot from 'uplot'

const axisStyles: uPlot.Axis = {
}

const plot = new uPlot.default()

With a namespace that is named the same as the uPlot class like it was before, we can use the TypeScript and JavaScript values at the same time.

Reference drawing:

Say you are trying to zoom from the point Mo.

What I'd like to do:

1. If the cursor is in the invisible green band of height x pixels, zoom in on the X axis.
2. If the cursor is in the invisible purple band of width x pixels, zoom in on the Y axis.
3. If the cursor is in the invisible burgundy intersection of height/width x pixels, don't zoom at all
4. If the cursor is in any of the four areas outside of the bands, zoom in on both the X and Y axis.

Hopefully that explanation makes sense!

Is this something that should be done via a plugin or would you consider it being part of the lib?

Thanks.

Hey,

I'm just wondering why many of the getPos functions in the drawing part of uPlot use round for their values? I'm working on adding real time to my chart and the rounding seems to make the data jump a lot as it hits the rounding boundaries.

With rounding:

Without rounding:

What's the best way to create a blank empty plot ready to call addSeries on? When I try to construct with an empty data array I get "Cannot read property '-1' of undefined". My use case is as a real-time graphing tool where users can add items to graph so I'd like to start out with a "blank" canvas.

I am trying to make a chart that will have visible x line as dotted line(that matches the position of the values(ticks?)), to have positive value have green color and fill and negative value to have red color and fill, both with gradient.

Something like this:

So far I have this:

{
      uplotData: [
        [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
        [5,-5, 0, 1,5,9,10,15,5,-10,-15,-20,-20,-5,0, 5]
      ],
      uplotOpts: {
        width: 100,
        height: 50,
        cursor: {
          show: false
        },
        select: {
          show: false,
        },
        legend: {
          show: false
        },
        scales: {
          x: {
            time: false
          }
        },
        axes: [
          {
            show: false,
          },
          {
            show: false,
          }
        ],
        series: [
          {},
          {
            stroke: "red",
            width: 1,
            fill: "rgba(255, 0, 0, 0.3)",
          }
        ],
      },

So far that will render me this:

Since the documentation is non-existent i checked the demos but I really don't get how that fill works or how to render that x- axis properly. I came from apex charts which could not render small charts without a ton of padding and chartjs documentation is horrible to go through.

This isn't a issue. I just want say thanks. Hope more people use it.

To select the best line chart package for my project, especially when points are about 2 millions. uPlot becomes No.1. Even it is fast than direct lineTo for Canvas. It is amazing. Thanks for the great work. Please see the detail at https://github.com/rubyzhao/LineChartPerformanceCompare

After updating to 1.0.10, it seems that undefined values are being pushed into the gaps array within #buildClip, resulting in a TypeError when referencing the value later. Downgrading to a version prior to the linked commit resolves the issue.

TypeError: g is undefined
    uPlot.esm.js:1691:4
    buildClip uPlot.esm.js:1691
    buildPaths uPlot.esm.js:1811
    drawSeries uPlot.esm.js:1580
    forEach self-hosted:225
    drawSeries uPlot.esm.js:1577
    paint uPlot.esm.js:2049
    setScale uPlot.esm.js:2090
    _setScale uPlot.esm.js:2165
    autoScaleX uPlot.esm.js:1218
    _init uPlot.esm.js:2815
    uPlot uPlot.esm.js:2827

I've debugged the issue into the https://github.com/leeoniya/uPlot/commit/5b985552618ab4539df6ea5b50f93d1710a66016 change (specifically, https://github.com/leeoniya/uPlot/commit/5b985552618ab4539df6ea5b50f93d1710a66016#diff-aabd864b5381c3ed4c3bc629b41ab21bR1669-R1672) where the push calls may insert undefined values if the gaps array was already empty (it assumes at least 2 elements).

I am not entirely certain of the conditions, but it seems that an undefined value is being inserted into the gaps array produced within #buildPaths.

buildPaths.gaps output: []
buildPaths.ydata input: [undefined, 1924, 1924, 1924, 1924]

In a simple fix, I tried to only push the headGap and tailGap values into the array if defined. This avoids the TypeError, but introduces a rendering issue where if not initially rendered, the graphs will never render.

I'm assuming this is simply a byproduct of me getting too excited with undefined values and is a usage error, but input is appreciated. Thank you!

Is this possible to specify chart size in %, such as 100% - so that it becomes adaptive - would occupy all available width within its container? If not that's greatly needed.

I have been searching for small graphing library for home sensor network running on ESP32 microcontroller which has limited resources. It seems like uPlot fit the bill.

• ESP32 collect 40 different sensor values from 10 temperature sensors , 10 humidity sensors , 10 pressure sensors and 10 light level sensors.

• ESP32 can save all this data in a file for historic records.

• ESP32 can run web interface (html, css and javascript) to display these data using uPlot.

I want to graph these data as line charts by each room which have 4 sensors each.

Have someone tried this ? if so how the data have to be stored in a file ?

There is a similar project using google charts here:

https://www.youtube.com/watch?v=_WhmGkI5rKg
https://github.com/G6EJD/ESP32-8266-Sensor-Monitor

Have someone tried this ? if so how the data have to be stored in a file ? What is the easiest way to achieving this ?

Thanks.

Based on

• https://leeoniya.github.io/uPlot/demos/scales-dir-ori.html
• https://leeoniya.github.io/uPlot/demos/multi-bars.html

I assumed that I could possibly try to flip the x and y axis for box plots (https://leeoniya.github.io/uPlot/demos/box-whisker.html). Though, a quick hack doesn't seem to do the trick.

Looking a bit more at the code of the demo, it seems like I would also need to flip the logic in the drawing routines.

Though, the interactive bits of the plots seem all very "column"-oriented. Should I be aware of any implicit assumptions that box plots are "columns"? Or should rotating/flipping axis "just work"?

At the end, I'd like reach a point where I have box plots like this:

I'd like to flip the axis mostly to make long performance reports more compact horizontally, to get loads of benchmarks on a relatively compact page. Full example: https://rebench.stefan-marr.de/TruffleSOM/compare/b953d3244f41878a1730350618a22afd595d5ba2..65141f9d66669a21cce28a5141f01b07b0f8a93f (this is currently generated with R+ggplot)

The other bit that I'd still need to figure out is how to draw the data points on top of the box, which is quite useful to me. But that's for another time.

Thanks!

should be better perf than manipulating left/width and top/height.

also, can set width: 1px; translateX(250px) at initial start and then only use neg or pos scaleX to set width instead of inverting them when selection goes the other way.

.u-select {
  position: absolute;
  background: pink;
  height: 600px;
  transform-origin: 0 0;

  width: 1px;
  transform: translateX(250px) scaleX(-100);
}

With a white background the std points fill and cursor markers work fine. However, on a dark background they don't. Repro: https://codepen.io/codesurfr/pen/vYaNwwR

• this is a copy of https://leeoniya.github.io/uPlot/demos/grid-over-series.html with the body background changed to #1e1e1e
• the points size is enlarged to 10pts so one can see stuff better
• the red series has no other change, notice how the points are filled with white instead of the background color
• the blue and green series fix that by setting the points fill to the same as the background color, however now the cursor marker no longer works properly because it uses the points fill color
• it is possible to completely fix the issue by defining the cursor points fill explicitly, see commented out code in the codepen

Is this a desired/intended state of the built-in cursor? Dark backgrounds are pretty popular for plots...

Maybe there should be an opts.dark or opts.background_color type of option passed to uPlot so it can do something more sensible by default?

Quick screen grab showing the points (no cursor here):

I have numbers in the picometer range. The axis around 10**-3 starts to render incorrectly. Around 10**-10, the lines start to render incorrectly.

For now, multiplying all y-numbers by 10**9 makes things work.

Any advice on working w/ small numbers?

My axis settings just look like this:

axes: [
      {
        scale: "x",
      },
      {
        scale: "y",
      },
    ],

Bad y-axis labels for 10**-3

Bad lines around 10**-11

Logarithmic scales work when using

range: { min: { hard: ...}, max: { hard: ...} }

but fail when using

range: { min: { soft: ...}, max: { soft: ...} }

Codepen: https://codepen.io/codesurfr/pen/XWYPdJE

Maybe I'm not understanding what 'soft' really does and I'm asking for something impossible?

NB: It would be really nice there was a bit of docs on the various ways to set ranges, ideally with a tad of motivation in there too... ;-) NNB: related issue #577

Hi Leon,

we use uPLot to view timeseries data and the user is able to pan the chart. It works great for granularity of <= 1 Day. If the ticks get above that, the chart updates the grid and tick days when the chart range changes. It creates an unpleasant jitter in the background. It, would be nice to keep the ticks on the dates where they are on initially, and not switching to the best possible start date. Do you have any ideas how to solve it?

https://user-images.githubusercontent.com/6011776/201056128-3bc3bd39-abac-461f-b0d9-7245867acf49.mov