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


📈 μPlot

A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)


μ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 ~35 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.

166,650 point bench: https://leeoniya.github.io/uPlot/bench/uPlot.html

However, if you need 60fps performance with massive streaming datasets, uPlot can only get you so far. WebGL should still be the tool of choice for applications like realtime signal or waveform visualizations: See danchitnis/webgl-plot, huww98/TimeChart, epezent/implot, or commercial products like LightningChart®.

uPlot Chart



In order to stay lean, fast and focused the following features will not be added:

  • No data parsing, aggregation, summation or statistical processing - just do it in advance. e.g. https://simplestatistics.org/, https://www.papaparse.com/
  • No transitions or animations - they're always pure distractions.
  • No collision avoidance for axis tick labels, so may require manual tweaking of spacing metrics if label customization significiantly increases default label widths.
  • No stacked series: see "Stacked Area Graphs Are Not Your Friend" and a horrific demo. While smooth spline interpolation is available, its use is strongly discouraged: Your data is misrepresented!. Both visualizations are terrible at accurately communicating information.
  • No built-in drag scrolling/panning due to ambiguous native zoom/selection behavior. However, this can be added externally via the plugin/hooks API: zoom-wheel, zoom-touch.

Documentation (WIP)

The docs are a perpetual work in progress, it seems. Start with /docs/README.md for a conceptual overview. The full API is further documented via comments in /dist/uPlot.d.ts. Additionally, an ever-expanding collection of runnable /demos covers the vast majority of uPlot's API.

Third-party Integrations


Benchmarks done on this hardware:

  • Date: 2021-04-24
  • Windows 10 x64, Chrome 90.0.4430.85 (64-bit)
  • Core i7-8700 @ 3.2GHz, 16GB RAM
  • AMD Radeon RX480, 2560x1440 res

uPlot Performance

Full size: https://leeoniya.github.io/uPlot/demos/multi-bars.html

Raw data: https://github.com/leeoniya/uPlot/blob/master/bench/results.json

| lib                    | size    | done    | js,rend,paint,sys | heap peak,final | mousemove (10s)     |
| ---------------------- | ------- | ------- | ----------------- | --------------- | ------------------- |
| uPlot v1.6.9           |   39 KB |   58 ms |   70   1   1   38 |  20 MB   3 MB   |   65  159   88  103 |
| ECharts v5.1.0         |  987 KB |   88 ms |   87   1   1   47 |  55 MB   5 MB   | 1463  284   84  521 |
| Chart.js v3.2.0        |  233 KB |   80 ms |  118   1   1   41 |  34 MB  11 MB   |  725   30   57 1467 |
| Flot v3.0.0            |  494 KB |   91 ms |  118   3   1   55 |  46 MB  16 MB   | ---                 |
| LightningChart® v2.2.1 | 1000 KB |  --- ms |  178   2   1   42 |  61 MB  22 MB   | 5310   46   43  180 |
| dygraphs v2.1.0        |  125 KB |  135 ms |  159   2   1   75 |  99 MB  44 MB   | 1087  162   74  205 |
| CanvasJS v3.2.13       |  482 KB |  241 ms |  271   2   1   66 |  52 MB  26 MB   |  961  256   76  195 |
| Highcharts v9.0.1      |  391 KB |  --- ms |  286   4   2   42 | 108 MB  33 MB   |  840  301  132  155 |
| dvxCharts v5.0.0       |  369 KB |  253 ms |  310  18   1   51 |  60 MB  24 MB   |  674  442  148  145 |
| Plotly.js v1.58.4      | 3500 KB |  377 ms |  408   5   1   71 | 199 MB  46 MB   | 1087  114   29   82 |
| Chart.js v2.9.4        |  245 KB |  495 ms |  524   2   1   75 | 103 MB  54 MB   | 8397    5    6 1158 |
| ECharts v4.9.0         |  785 KB |  366 ms |  498   1   1  581 | 224 MB  78 MB   | 2265   64   17 7551 |
| ApexCharts v3.26.1     |  478 KB |  --- ms | 1634  22   1   44 | 332 MB  70 MB   | 8611  646   99  154 |
| ZingChart v2.9.3       |  857 KB | 2081 ms | 2101   5   1   38 | 191 MB 100 MB   | ---                 |
| amCharts v4.10.18      | 1200 KB | 5564 ms | 4925  19   6   67 | 695 MB 237 MB   | 1494  336  164  285 |

Normally, all libs are updated to their latest versions before each benchmark round. However, libraries which show significant performance improvements in latest versions will have prior versions shown to encourage migration; this is especially true for still-widely-deployed libs, such as Chart.js v2.9.4, and ECharts v4.9.0. Deployment prevalence is assessed from public npm and CDN download stats for the prior few months.

  • libs are sorted by their initial, cold-start, render performance (excluding network transfer time to download the lib)
  • size includes the lib itself plus any dependencies required to render the benchmark, e.g. Moment, jQuery, etc.
  • Flot does not make available any minified assets and all their examples use the uncompressed sources; they also use an uncompressed version of jQuery :/

Some libraries provide their own performance demos:

TODO (all of these use SVG, so performance should be similar to Highcharts):

  • Chartist.js
  • d3-based
    • C3.js
    • dc.js
    • MetricsGraphics
    • rickshaw


  • Cursor scale value sync

    Cursor scale value sync

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


    opened by EmiPhil 93
  • mouse zooming at the edges

    mouse zooming at the edges

    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?

    opened by hz2018tv 28
  • Bring back the uPlot typescript namespace

    Bring back the uPlot typescript namespace

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


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


     // 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()


    // Having to import uplot twice.
    import uPlot from 'uplot'
    import type * as uPlotTypes from 'uplot'
    const axisStyles: uPlotTypes.Axis = {
    const plot = new uPlot()


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

    opened by joaopaulobdac 24
  • Auto X / Y Zoom

    Auto X / Y Zoom

    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?


    opened by EmiPhil 21
  • Rounding in draw functions

    Rounding in draw functions


    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:


    opened by EmiPhil 19
  • Create blank empty plot

    Create blank empty plot

    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.

    question enhancement 
    opened by ghost 19
  • Help with the configuration

    Help with the configuration

    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: obrázok

    So far I have this:

          uplotData: [
            [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: obrázok

    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.

    opened by ivanjaros 18
  • Top performance, Great work

    Top performance, Great work

    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

    opened by rubyzhao 18
  • undefinied entries in gaps array during #buildClip

    undefinied entries in gaps array during #buildClip

    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
        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!

    opened by Cryptkeeper 17
  • Adaptive/responsive size?

    Adaptive/responsive size?

    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.

    opened by wishforfree 17
  • [Solved] Using uPlot on ESP32 microcontroller

    [Solved] Using uPlot on ESP32 microcontroller

    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:


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


    opened by happytm 16
  • What is needed to rotate box plots?

    What is needed to rotate box plots?

    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:

    • Inline boxplot
    • Executor comparison
    • Executor comparison 2

    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.


    opened by smarr 3
  • try css transforms for selection sizing

    try css transforms for selection sizing

    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);
    perf enhancement 
    opened by leeoniya 1
  • Points fill and cursor marker issues in dark mode

    Points fill and cursor marker issues in dark mode

    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): image

    opened by tve 2
  • Small numbers don't render properly on axis

    Small numbers don't render properly on axis

    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 image

    Bad lines around 10**-11

    opened by nate-h 3
  • logarithmic scales don't like soft min/max?

    logarithmic scales don't like soft min/max?

    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

    opened by tve 2
  • Stabilise X-Axis ticks while panning

    Stabilise X-Axis ticks while panning

    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?


    opened by KristjanLiiva 2
  • 1.6.23(Dec 1, 2022)

  • 1.6.22(Jul 8, 2022)

  • 1.6.21(Jun 6, 2022)

  • 1.6.20(May 2, 2022)

  • 1.6.19(Feb 8, 2022)

  • 1.6.18(Dec 17, 2021)

  • 1.6.17(Nov 14, 2021)

  • 1.6.16(Sep 15, 2021)

  • 1.6.15(Aug 13, 2021)

  • 1.6.14(Jul 21, 2021)

  • 1.6.13(Jun 16, 2021)


    • detect & sync devicePixelRatio changes (e.g. browser zoom). this makes for an SVG-like experience on desktop but not mobile, where pinch zooming does not trigger dppx MediaQueryList change events :(
    • accept null values in Range.MinMax tuple to indicate auto-ranging. (#526)
    • add series.points.filter() for custom per-point show/hide logic & pass in gaps array from series.paths()
    • add cursor.idxs which holds indices returned by cursor.dataIdx() (for read-back)
    • fix uPlot.rangeNum() in softMode: 2 auto-ranging flat/all-0 values to -100,100
    • improve axis auto-size logic in demo to actually use measureText() and add in the required axis.ticks.size and axis.gap
    Source code(tar.gz)
    Source code(zip)
  • 1.6.12(Jun 4, 2021)


    • bars pathBuilder now uses the minimum x distance between all adjacent points in dataset to determine available space for a bar. previously only the first two points were used, which may create too-wide bars when dataset is not evenly spaced.
    • auto point visibility now uses x distance between first and last in-view points to determine avg point density. previously it always used points-in-view and full width of chart, which was inaccurate if dataset does not actually span full chart (x scale is wider than dataset).
    Source code(tar.gz)
    Source code(zip)
  • 1.6.11(Jun 3, 2021)


    • fix stroke being wrongly clipped (along with fill) when using bands with non-bars pathbuilders. see https://github.com/grafana/grafana/issues/34904
    Source code(tar.gz)
    Source code(zip)
  • 1.6.10(May 26, 2021)


    • [BREAKING] legend marker options (width, stroke, fill, dash) have moved from legend inwards to the new legend.markers. these are not commonly used opts, so it felt okay to break them mechanically as part of introducing another marker-specific option (below)
    • legend.markers.show can now be set to false to disable markers and render the labels with the stroke or fill color. (#514)
    • opts.gap for bars pathBuilder
    • formal band manip methods: .addBand(), .setBand(), .delBand(). (#516)
    • new syncRect hook for notifying when .getBoundingClientRect() is called after scroll or resize
    • expose .u-over and .u-under as instance props to reduce need for u.root.querySelector(".u-over"), reduces plugins boilerplate and improves perf
    • ensure axis auto-sizing converges after 3 cycles (fixes infinite loops & ui lockups if externally-provided axis.size() function fails to properly converge)
    • fix join() to not expand undefined values with nulls
    • fix cursor sync setSelect using own scale keys for lookups instead of emitter's
    • fix regression: cannot read 'scale' of undefined error when initializing uPlot with no y series (#519)
    • fix y-scale auto-ranging: treat deltas < 1e-9 as flat. fixes min/max of e.g. 89.69999999999999, 89.7
    • add undefined to AlignedData type series value arrays
    • bars pathBuilder improvements
    • various demos refinements
    Source code(tar.gz)
    Source code(zip)
  • 1.6.9(May 1, 2021)


    • switch spline paths to use monotone cubic interpolation instead of centripetal Catmull-Rom. this is somewhat less curvey but avoids exceeding min/max y values. (#504)
    • enhancements, fixes and optimizations for cursor.sync
    • fix errors when legend.live: false. (#496)
    • skip updating a hidden cursor when resizing. (#499)
    • avoid error when axis tick increment calc fails, and simply skip rendering ticks. (#503)
    • add fireHook arg to .setCursor()
    • various typings and demos refinements
    • updated benchmarks for all libs
    Source code(tar.gz)
    Source code(zip)
  • 1.6.8(Apr 9, 2021)


    • new .setLegend({idx}) API and matching hook that fires on legend updates. (#414)
    • new legend.isolate mode (Ctrl+click). (#404)
    • opts.pxAlign and series.pxAlign can now to define the pixel rounding increment to reduce micro-shifting in streaming cases. (#241)
    • axis.values can now be a static array
    • optimized handling of clientRect invalidation during resize and scrolling. also fixes bug that failed to invalidate clientRect of plots when scrolling was of an ancestor container (not window).
    • fix for float math precision issues in ms date handling. (#472)
    • 50% fewer lineTo() calls when only 2 datapoints per pixel
    • data smoothing demo: https://leeoniya.github.io/uPlot/demos/data-smoothing.html
    • new histogram demo below latency heatmaps: https://leeoniya.github.io/uPlot/demos/latency-heatmap.html
    • timeline demo improvements
    Source code(tar.gz)
    Source code(zip)
  • 1.6.7(Mar 11, 2021)


    • fixes a perf issue with cursor.focus which caused the chart to redraw on every focus change even with alpha: 1 where no visible change happened. this caused a significant perf impact when mousing over a lot of densely-packed series.
    Source code(tar.gz)
    Source code(zip)
  • 1.6.6(Mar 9, 2021)


    • ascDesc opt for stepped pathbuilder to control whether to draw ascenders/descenders at null/gap boundaries. now defaults to false. (https://github.com/grafana/grafana/issues/17838#issuecomment-789010128)
    • selective filtering for synced cursors. e.g. can sync position without syncing zoom. (https://github.com/leeoniya/uPlot/issues/459)
    • perf improvements, mostly for streaming cases.
    • typings refinements
    • fix for initially-defined min/max for scales (unborks the ranger demos)
    • new timeline/discrete demo: https://leeoniya.github.io/uPlot/demos/timeline-discrete.html
    • new sine-stream demo: https://leeoniya.github.io/uPlot/demos/sine-stream.html
    Source code(tar.gz)
    Source code(zip)
  • 1.6.5(Feb 14, 2021)


    • Inverse hyperbolic sine scale distribution - like log scales, but are linear below a certain threshold and can be <= 0. see https://leeoniya.github.io/uPlot/demos/arcsinh-scales.html
    • expose internal pubsub creator as uPlot.sync(key). this allows things like runtime toggling of cursor sync (#354). see https://leeoniya.github.io/uPlot/demos/sync-cursor.html
    • typings are now under a namespace (https://github.com/leeoniya/uPlot/issues/444)
    • inverted log scales demo (using 2 direction-reflected charts). see https://leeoniya.github.io/uPlot/demos/log-scales2.html
    Source code(tar.gz)
    Source code(zip)
  • 1.6.4(Feb 2, 2021)


    • bands now properly clip strokes, too (e.g. stacking stroked bars)
    • it's now possible to redraw axes without invalidating scales, e.g. to change the tick value formatting or precision. (#437)
    • series._focus prop to help check if a series is focused by cursor (#429)
    • opts.pxAlign & series.pxAlign opts to opt out of canvas translation during path & point drawing (#442)
    • perf improvements to linear path builder when qty of datapoints <= width pixels
    • various tweaks to uPlot.join()
    • multi-bars demo improvements
    • scale-affixed stroke gradient demo: https://leeoniya.github.io/uPlot/demos/gradient-stroke.html
    Source code(tar.gz)
    Source code(zip)
  • 1.6.3(Jan 22, 2021)

  • 1.6.2(Jan 21, 2021)


    • series.isGap is gone and uPlot.join() now returns the data array directly, with undefined occupying the value locations of alignment artifacts. as a result, .join() internals have been optimized/simplified for a 2-3x speedup.
    • callback signatures for axis.stroke, axis.grid.stroke, axis.ticks.stroke
    • no more defaulting to black when series.stroke is absent. this helps fill-only series.
    • some more robustness to early-exit before trying to draw will empty stroke, empty fill or empty paths.
    Source code(tar.gz)
    Source code(zip)
  • 1.6.1(Jan 16, 2021)

  • 1.6.0(Jan 13, 2021)


    • [BREAKING] the way bands work has changed to be faster, more robust and more flexible. series no longer need to be adjacent, and band definitions are now specified independently of the series, in opts.bands with series indices. this opens up cool cases like filling between arbitrary series: https://leeoniya.github.io/uPlot/demos/high-low-bands.html, and as a result can now be used for implementing real stacking: https://leeoniya.github.io/uPlot/demos/stacked-series.html. the changes required to existing code should be purely mechanical: e.g. https://github.com/leeoniya/uPlot/commit/a580c7335ec469f6cc606ac831b19f187687a628#diff-9f8a6f3548684930b1691146303ca078d99c6a21c715b574e56fe6abaf0257f0
    • full support for chart rotation (scale direction and orientation control). https://leeoniya.github.io/uPlot/demos/scales-dir-ori.html
    • new uPlot.orient() util fn to help with grabbing the properly-oriented scales, data arrays and drawing fns
    • series.cap, series.points.cap, axis.grid.cap, axis.ticks.cap now set ctx.lineCap, which can be useful in combination with dash, to create a dotted-round line path style.
    • hz bars demo, with a tiny/fast quad-tree implementation for hit-testing & hover detection
    • align option added to bars path-builder, should be helpful for histograms
    • legend.width & legend.dash options
    • auto-init scales referenced by axes. (#418)
    • don't transform arrow functions (#423)
    Source code(tar.gz)
    Source code(zip)
  • 1.5.2(Dec 16, 2020)


    • dynamic fill/strokes: callback sigs for fill & stroke in series & series.points
    • simplify customization of cursor hover points (can be done via cfg object, similar to series.points)
    • allow legend stroke & fill to be explicitly set. (#383)
    Source code(tar.gz)
    Source code(zip)
  • 1.5.1(Dec 12, 2020)

  • 1.5.0(Dec 11, 2020)


    • [BREAKING] opts.gutters: {x,y} -> opts.padding: [top,rgt,btm,lft] (#392)
    • allow drawing axes & grid over series via opts.drawOrder: ["axes", "series"] (#386)
    • extract & modularize all path-building code. linear, stepped, spline & bars path-builders are now in the core. (https://leeoniya.github.io/uPlot/demos/line-paths.html)
    • don't crash with log scales & data values <= 0; draw them as 1 magnitude below scale.min.
    • uPlot.join() util for null-filling and merging unaligned data from different sources. (similar to SQL's outer join)
    • fix for defining stroke or fill as canvas gradient or canvas pattern objects
    Source code(tar.gz)
    Source code(zip)
  • 1.4.7(Dec 4, 2020)


    • some refinements to isGap (e.g. #387)
    • expose clip building helper util funcs
    • always draw fill before stroke (#385)
    • typings stuff
    Source code(tar.gz)
    Source code(zip)
  • 1.4.6(Nov 27, 2020)

  • 1.4.5(Nov 27, 2020)


    • native support for millisecond timestamps via opts.ms: 1. (#378)
    • cycleNum arg for axis.size() & gutters.x/y(), for inf loop exit
    Source code(tar.gz)
    Source code(zip)
Leon Sorokin
"All problems in computer science can be solved by another level of abstraction...except for the problem of too many levels of abstraction."
Leon Sorokin
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
Pretty time-series line graphs

Morris.js - pretty time-series line graphs Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It's a very simple API for dr

null 7k Dec 24, 2022
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Jan 3, 2023
Reveal.js plugin for marking selected lines or regions of text

Reveal.js / Mark.js plugin Based on the highlight plugin from Reveal.js, which supports animated marking (emphasizing) of specific code regions by lin

stlab 3 Aug 9, 2022
Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created

Brian Vaughn 512 Jan 2, 2023
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Palantir Technologies 2.9k Dec 31, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Dec 25, 2022