Make charts zooming and panning to work

[miohtama]

Currently, one cannot zoom and pan trading chart data properly.

We use ad hoc uPlot.js integration.

Explore how to panning and zooming would be easiest to implement

• To do it with uPlot.js
• To replace uPlot with some other open-source library
• To replace uPlot with TradingViews' JS library (not preferred)

[kenkunz]

@miohtama are you aware of specific sites that provide a high quality zooming / panning experience for trading charts (or similar time-series data)?

[miohtama]

Yes. TradingView is the market leader. A cold start might be hard. Let’s hop on a 30 - 45 minuters call with @tsorro and go through it. Let’s also make a short recording of it, so we might publish a bits of it later as a tutorial. We’ll give you a crash course.

[miohtama]

Meanwhile please peak on uPlot code and website for examples. It is not the easiest library, but it’s still much better than starting building something like this from the scratch.

[kenkunz]

Let’s hop on a 30 - 45 minute call with @tsorro and go through it.… We’ll give you a crash course.

Sounds good. I'm assuming next week, given how busy you guys are at Avalanche?

[kenkunz]

Meanwhile please peak on uPlot code and website for examples. It is not the easiest library, but it’s still much better than starting building something like this from the scratch.

👍 makes sense. I started reviewing the uPlot code yesterday, as well as their docs / examples – will continue exploring today. I also started some high-level research into other open-source alternatives (Chart.js, Carbon Charts, other D3-based solutions).

If I reach a point where I'm blocked, I'll move on to the next issue.

Thanks… enjoy the rest of the summit!

[tsorro]

Yes. TradingView is the market leader. A cold start might be hard. Let’s hop on a 30 - 45 minuters call with @tsorro and go through it. Let’s also make a short recording of it, so we might publish a bits of it later as a tutorial. We’ll give you a crash course.

@kenkunz I’d be happy to hop on a brief video call to show you a standard functionality that charting tools typically provide. I believe I would find a slot tomorrow afternoon my time or Friday afternoon if that would help you progress.

[kenkunz]

@tsorro thanks – that would be helpful.

My schedule is flexible, so you name the time that's best for you:

• Thursday – anytime after 8am Chicago / 2pm CET
• Friday – anytime after 9am Chicago / 3pm CET

I've done some initial exploration of TradingView chart and ChartIQ – they seem to follow pretty consistent UI conventions.

FYI, I'm not blocked at the moment – I am experimenting with uPlot and some other JS charting options – so if it's easier to wait until next week, that's fine for me as well.

Thanks!
Ken

[kenkunz]

Per Discord discussion with @miohtama:

Current features

• OHCL + V = 2 baselines
• Double axes
• Time bucket selector

Near term enhancements

• Pan backwards
• Adjust scales by dragging
• Real-time data updates

Long term enhancements

• Technical drawing tools

[kenkunz]

Trading View

Pros

• traders and strategy developers are very familiar with TradingView UI
• free as-in beer (as long as your use case is public-facing and you display their watermark)
• API is easy for the "happy path" OHLCV chart
• zooming and scrolling animations are pretty smooth (but see data-feed issue below)
• supports basic customizations (colors, show/hide various features)

Cons

• proprietary
• branding – must display TV watermark
• poor documentation / limited support
• convoluted installation (manual copy files to two locations src/lib/tradingview and static/tradingview)
• data feed limitations – only supports fixed OHLCV data points
• data feed fetch approach lacks sophistication (requests exactly the data points required to display chart / no look-ahead)
• limitations of UI customizability

[kenkunz]

ChartIQ

Pros

• branding – fully white-labeled / no third-party watermark required
• more straightforward installation (npm install from a downloaded tarball)
• documentation and support are much better than Trading View
• flexibility – much easier to customize layout, colors, currency formats, etc. (almost everything can be customized)
• composition-based API (vs. TV "kitchen sink / subtraction" approach)
• data feed format supports arbitrary properties (not tied to OHLCV)
• data feed fetch approach is better than TV (always requests next 300 candles – fewer requests / less visual latency)
• possible to create a UI experience that closely mirrors TradingView / feels familiar to traders and strategy developers

Cons

• proprietary
• license fees (not free but not exorbitant)
• some code overhead required to import and register required modules in Svelte component
• requires more boilerplate code to display a standard OHLCV chart
• zooming and scrolling animations are somewhat jerky compared to TV

[kenkunz]

D3 + Svelte SVG Components

In addition to the above proprietary solutions, I also did a PoC using D3 for all of the math and Svelte SVG components for all of the rendering.

Pros

• open-source all the way down
• consistent with Svelte's declarative paradigm
• no new library to learn / maintain
• 100% control over styling, and all visual elements are markup / styled with CSS
• opportunity to extract and publish an open-source Financial Chart component library
• potential for SSR – page could load with chart fully rendered (based on default interval / date range) and then hydrate to become dynamic
• fun!

Cons

• lack of off-the-shelf functionality that comes with TradingView or ChartIQ
  • beyond the core charting functionality, we would eventually need to implement technical analysis drawing tools as well; the scope of this could be significant
• higher risk – we don't know what we don't know until we get into the weeds
• may run into some performance issues with SVG when a large number of candles are displayed (though initial testing seems promising)

[kenkunz]

Additional JS Charting Libraries

The following other JS charting solutions were also considered:

• uPlot – current solution used in our code for basic (static) charts; limited features, not well maintained
• Charts.js – mature, well-maintained JS charting solution; canvas-based; no off-the-shelf support for financial charts, panning, zooming (some support via plugins); no trading-specific indicators / studies or technical analysis tools
• Carbon Charts – part of IBM Carbon design system; no off-the-shelf support for financial charts, panning, zooming; no trading-specific indicators / studies or technical analysis tools
• Other D3-based options – Cubism, Plotly, Observable Plot, NVD3, Rickshaw – no significant advantage over using D3 with Svelte SVG components

[kenkunz]

Decision – ChartIQ

Based on review of PoCs on 19.4.2022 and discussion – team is aligned to go with ChartIQ.

Next steps:

• follow up with ChartIQ folks about payment options (preference for crypto stable coin; fall-back to Euro or Pound sterling)
• create an Epic for implementing ChartIQ in frontend app, along with initial set of issues for v1 / MVP (goal is good enough to replace current uPlot charts; iteratively improve from there)

[kenkunz]

This spike / investigation issue is complete. See:

• ChartIQ charts MVP #69