leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.51k stars 371 forks source link

explore using bands (and cached paths) as a stroke and/or fill style for another series #889

Open leeoniya opened 6 months ago

leeoniya commented 6 months ago

since we already do the work of constructing and caching the band paths, we could figure out a way/api to reuse them as a form of threshold fill/stroke of a different series.

related demo: https://leeoniya.github.io/uPlot/demos/gradients.html

image

leeoniya commented 6 months ago

may require allowing bands to be boundless to one side, (and/or just using the existing fillTo() to the edges of the canvas)

ctx.createPattern() may be useful, but would require an additional canvas element or complexity about re-using the existing one.

leeoniya commented 6 months ago

maybe something like this which uses existing global band defs and defines coloring

series.bands = [
  {
      band: 1,
      stroke: '#f00',
      fill: ''#ff08',
  }
]

or we can allow fill and stroke defs to be defined in terms of bands:

series.stroke = [
  [1, '#f00']
]

this may be interesting since it feels similar to gradient color stops, and can be used for a similar purpose