blazeplot 0.2.0 → 0.2.2

package/dist/index.js

@@ -152,12 +152,25 @@ function r(e) {
 function i(e) {
 	return "getOpen" in e && "getHigh" in e && "getLow" in e && "getClose" in e;
 }
-function a(e, t, n, r, i) {
+function a(e) {
+	return "copySamplesRange" in e;
+}
+function o(e) {
+	return "copyMinMaxSegments" in e;
+}
+function s(e) {
+	return "copyVisibleSamples" in e;
+}
+function c(e) {
+	return "copyVisiblePoints" in e;
+}
+var l = 64, u = 64, d = 1024;
+function f(e, t, n, r, i) {
 	if (n === e) return t;
 	let a = (i - e) / (n - e);
 	return t + (r - t) * a;
 }
-var o = class {
+var p = class {
 	config;
 	style;
 	dataset;
@@ -169,7 +182,7 @@ var o = class {
 	_lastBuildRangeStart = NaN;
 	_visible = !0;
 	constructor(e, t, i) {
-		this.dataset = e, this.config = t, this.pyramid = (t.mode === "line" || t.mode === "bar") && t.downsample !== "none" ? new n() : null, this._useDatasetRangeMinMax = r(e), this.style = i, this.pyramid && e.length > 0 && !this._useDatasetRangeMinMax && this.pyramid.build(e), this._lastBuildLength = e.length, this._lastBuildRangeStart = e.range?.start ?? NaN;
+		this.dataset = e, this.config = t, this.pyramid = (t.mode === "line" || t.mode === "bar" || t.mode === "scatter") && t.downsample !== "none" ? new n() : null, this._useDatasetRangeMinMax = r(e), this.style = i, this.pyramid && e.length > 0 && !this._useDatasetRangeMinMax && this.pyramid.build(e), this._lastBuildLength = e.length, this._lastBuildRangeStart = e.range?.start ?? NaN;
 	}
 	get hasLOD() {
 		return this.pyramid !== null;
@@ -237,24 +250,72 @@ var o = class {
 		}
 		return this.sampleAt(i);
 	}
-	nearestSampleByPoint(e, t, n, r, i) {
-		let a = this.visibleIndexRange(n);
-		if (a.start >= a.end || r <= 0 || i <= 0) return null;
-		let o = r / (n.xMax - n.xMin), s = i / (n.yMax - n.yMin), c = -1, l = Infinity;
-		for (let n = a.start; n < a.end; n++) {
-			let r = (this.dataset.getX(n) - e) * o, i = (this.dataset.getY(n) - t) * s, a = r * r + i * i;
-			a < l && (l = a, c = n);
-		}
-		if (c < 0) return null;
-		let u = this.sampleAt(c);
-		return u ? {
-			...u,
-			distancePx: Math.sqrt(l)
+	nearestSampleByPoint(e, t, n, r, i, a = Infinity) {
+		let o = this.visibleIndexRange(n), s = n.xMax - n.xMin, c = n.yMax - n.yMin;
+		if (o.start >= o.end || r <= 0 || i <= 0 || s <= 0 || c <= 0) return null;
+		let u = r / s, d = i / c, f = -1, p = a < 0 ? -1 : Number.isFinite(a) ? a * a : Infinity, m = (n) => {
+			let r = (this.dataset.getX(n) - e) * u, i = (this.dataset.getY(n) - t) * d, a = r * r + i * i;
+			(a < p || f < 0 && a <= p) && (p = a, f = n);
+		}, h = this.dataset.lowerBoundX(e), g = Math.min(Math.max(h, o.start), o.end - 1);
+		if (m(g), g > o.start && m(g - 1), g + 1 < o.end && m(g + 1), this.hasPointIntervalBounds() && o.end - o.start > l) {
+			let n = this.pointIntervalDistanceSq(o.start, o.end, e, t, u, d), r = n <= p ? [{
+				start: o.start,
+				end: o.end,
+				lowerBoundSq: n
+			}] : [];
+			for (; r.length > 0;) {
+				let n = r.pop();
+				if (n.lowerBoundSq > p) continue;
+				let i = n.end - n.start;
+				if (i <= l) {
+					for (let e = n.start; e < n.end; e++) m(e);
+					continue;
+				}
+				let a = n.start + (i >> 1), o = this.pointIntervalDistanceSq(n.start, a, e, t, u, d), s = this.pointIntervalDistanceSq(a, n.end, e, t, u, d), c = {
+					start: n.start,
+					end: a,
+					lowerBoundSq: o
+				}, f = {
+					start: a,
+					end: n.end,
+					lowerBoundSq: s
+				};
+				o < s ? (s <= p && r.push(f), o <= p && r.push(c)) : (o <= p && r.push(c), s <= p && r.push(f));
+			}
+		} else {
+			let t = Math.min(h - 1, o.end - 1), n = Math.max(h, o.start);
+			for (; t >= o.start || n < o.end;) {
+				let r = t >= o.start ? this.pointXDistanceSq(t, e, u) : Infinity, i = n < o.end ? this.pointXDistanceSq(n, e, u) : Infinity;
+				if (r > p && i > p) break;
+				r <= i ? (r <= p && m(t), t--) : (i <= p && m(n), n++);
+			}
+		}
+		if (f < 0) return null;
+		let _ = this.sampleAt(f);
+		return _ ? {
+			..._,
+			distancePx: Math.sqrt(p)
 		} : null;
 	}
 	copyRawVisible(e, t, n, r = 0) {
 		return this.copyVisibleSamples(e, t, n, "points", 0, r);
 	}
+	copyScatterVisible(e, t, n, r, i, a, o = 0) {
+		return this.copyVisiblePoints(e, t, n, r, i, a, o);
+	}
+	copyScatterRange(e, t, n, r, i, a = 0, o = 0, s = 0) {
+		if (i <= 0 || r.length < i * 2) return 0;
+		let c = Math.max(0, Math.floor(e)), l = Math.min(this.dataset.length, Math.ceil(t));
+		if (l <= c) return 0;
+		let u = n.yMax - n.yMin, d = Math.max(0, Math.floor(o)), f = u > 0 && d > 0 ? (Number.isFinite(s) ? Math.max(0, s) : 0) * .5 / d * u : 0, p = n.yMin - f, m = n.yMax + f, h = 0;
+		for (let e = c; e < l && h < i; e++) {
+			let t = this.dataset.getY(e);
+			if (t < p || t > m) continue;
+			let n = h * 2;
+			r[n] = this.dataset.getX(e) - a, r[n + 1] = t, h++;
+		}
+		return h;
+	}
 	copyRawVisibleClipped(e, t, n, r = 0) {
 		return this.copyClippedVisibleLine(e, t, n, r, "data");
 	}
@@ -285,6 +346,15 @@ var o = class {
 		}
 		return l;
 	}
+	copyOhlcTuplesRange(e, t, n, r, a = 0) {
+		if (!i(this.dataset) || r <= 0 || n.length < r * 5) return 0;
+		let o = Math.max(0, Math.floor(e)), s = Math.min(this.dataset.length, Math.ceil(t)), c = Math.min(r, Math.max(0, s - o));
+		for (let e = 0; e < c; e++) {
+			let t = o + e, r = e * 5;
+			n[r] = this.dataset.getX(t) - a, n[r + 1] = this.dataset.getOpen(t), n[r + 2] = this.dataset.getHigh(t), n[r + 3] = this.dataset.getLow(t), n[r + 4] = this.dataset.getClose(t);
+		}
+		return c;
+	}
 	visibleIndexRange(e, t = 0) {
 		if (!e) return {
 			start: 0,
@@ -296,78 +366,182 @@ var o = class {
 			end: Math.min(this.dataset.length, this.dataset.upperBoundX(e.xMax) + n)
 		};
 	}
+	pointXDistanceSq(e, t, n) {
+		let r = (this.dataset.getX(e) - t) * n;
+		return r * r;
+	}
+	pointIntervalDistanceSq(e, t, n, r, i, a) {
+		if (t <= e) return Infinity;
+		let o = this.dataset.getX(e), s = this.dataset.getX(t - 1), c = n < o ? (o - n) * i : n > s ? (n - s) * i : 0, l = this.pointIntervalMinMaxY(e, t);
+		if (!l) return Infinity;
+		let u = r < l.minY ? (l.minY - r) * a : r > l.maxY ? (r - l.maxY) * a : 0;
+		return c * c + u * u;
+	}
+	hasPointIntervalBounds() {
+		return r(this.dataset) || this.pyramid !== null && !this._dirty && !this._useRawMinMaxScan;
+	}
+	pointIntervalMinMaxY(e, t) {
+		return r(this.dataset) ? this.dataset.rangeMinMaxY(e, t) : this.pyramid && !this._dirty && !this._useRawMinMaxScan ? this.pyramid.rangeMinMax(this.dataset, e, t) : null;
+	}
 	copyClippedVisibleLine(e, t, n, r, i) {
 		if (n <= 0 || t.length < n * 2) return 0;
-		let o = e.xMax - e.xMin, s = e.yMax - e.yMin;
-		if (i === "clip" && (o <= 0 || s <= 0)) return 0;
-		let c = Math.max(0, this.dataset.lowerBoundX(e.xMin) - 1), l = Math.min(this.dataset.length, this.dataset.upperBoundX(e.xMax) + 1);
-		if (l - c <= 0) return 0;
-		let u = 0, d = NaN, f = NaN, p = (a, c) => {
-			let l = i === "clip" ? (a - e.xMin) / o * 2 - 1 : a - r, p = i === "clip" ? (c - e.yMin) / s * 2 - 1 : c;
-			if (u > 0 && l === d && p === f) return !0;
-			if (u >= n) return !1;
-			let m = u * 2;
-			return t[m] = l, t[m + 1] = p, u++, d = l, f = p, !0;
+		let a = e.xMax - e.xMin, o = e.yMax - e.yMin;
+		if (i === "clip" && (a <= 0 || o <= 0)) return 0;
+		let s = Math.max(0, this.dataset.lowerBoundX(e.xMin) - 1), c = Math.min(this.dataset.length, this.dataset.upperBoundX(e.xMax) + 1);
+		if (c - s <= 0) return 0;
+		let l = 0, u = NaN, d = NaN, p = (s, c) => {
+			let f = i === "clip" ? (s - e.xMin) / a * 2 - 1 : s - r, p = i === "clip" ? (c - e.yMin) / o * 2 - 1 : c;
+			if (l > 0 && f === u && p === d) return !0;
+			if (l >= n) return !1;
+			let m = l * 2;
+			return t[m] = f, t[m + 1] = p, l++, u = f, d = p, !0;
 		};
-		if (l - c === 1) {
-			let t = this.dataset.getX(c);
-			return t < e.xMin || t > e.xMax ? 0 : p(t, this.dataset.getY(c)) ? u : 0;
+		if (c - s === 1) {
+			let t = this.dataset.getX(s);
+			return t < e.xMin || t > e.xMax ? 0 : p(t, this.dataset.getY(s)) ? l : 0;
 		}
-		for (let t = c; t + 1 < l; t++) {
-			let n = this.dataset.getX(t), r = this.dataset.getY(t), i = this.dataset.getX(t + 1), o = this.dataset.getY(t + 1);
+		for (let t = s; t + 1 < c; t++) {
+			let n = this.dataset.getX(t), r = this.dataset.getY(t), i = this.dataset.getX(t + 1), a = this.dataset.getY(t + 1);
 			if (i < e.xMin || n > e.xMax) continue;
-			let s = Math.max(n, e.xMin), c = Math.min(i, e.xMax);
-			if (c < s) continue;
-			let l = a(n, r, i, o, s), u = a(n, r, i, o, c);
-			if (!p(s, l) || !p(c, u)) break;
+			let o = Math.max(n, e.xMin), s = Math.min(i, e.xMax);
+			if (s < o) continue;
+			let c = f(n, r, i, a, o), l = f(n, r, i, a, s);
+			if (!p(o, c) || !p(s, l)) break;
 		}
-		return u;
+		return l;
+	}
+	copyVisiblePoints(e, t, n, r, i, a, o) {
+		if (c(this.dataset)) return this.dataset.copyVisiblePoints(e, t, n, o, r, i, a);
+		if (n <= 0 || t.length < n * 2) return 0;
+		let s = e.xMax - e.xMin, l = e.yMax - e.yMin, u = Math.max(1, Math.floor(r)), d = Math.max(1, Math.floor(i));
+		if (s <= 0 || l <= 0) return 0;
+		let f = (Number.isFinite(a) ? Math.max(0, a) : 0) * .5, p = f / u * s, m = f / d * l, h = e.xMin - p, g = e.xMax + p, _ = e.yMin - m, v = e.yMax + m, y = this.dataset.lowerBoundX(h), b = this.dataset.upperBoundX(g);
+		if (b <= y) return 0;
+		if (b - y <= n) return this.copyVisiblePointRange(y, b, _, v, t, n, o);
+		let x = this.hasPointIntervalBounds(), S = x ? this.pointIntervalMinMaxY(y, b) : null;
+		if (S && (S.maxY < _ || S.minY > v)) return 0;
+		if (b - y <= n * 4) {
+			let e = this.copyVisiblePointsExact(y, b, _, v, t, n, o);
+			if (!e.overflow) return e.count;
+		}
+		let C = S !== null && S.minY >= _ && S.maxY <= v;
+		return this.copyVisiblePointBuckets(y, b, _, v, t, n, o, C, x);
+	}
+	copyVisiblePointRange(e, t, n, r, i, a, o) {
+		let s = 0;
+		for (let c = e; c < t && s < a; c++) {
+			let e = this.dataset.getY(c);
+			if (e < n || e > r) continue;
+			let t = s * 2;
+			i[t] = this.dataset.getX(c) - o, i[t + 1] = e, s++;
+		}
+		return s;
+	}
+	copyVisiblePointBuckets(e, t, n, r, i, a, o, s, c) {
+		let l = t - e, u = this.stableScatterBucketWidth(l, a), f = Math.floor(e / u) * u, p = 0, m = (e) => {
+			let t = p * 2;
+			i[t] = this.dataset.getX(e) - o, i[t + 1] = this.dataset.getY(e), p++;
+		};
+		for (let l = f; l < t && p < a; l += u) {
+			let a = Math.min(t, l + u), f = Math.max(e, l);
+			if (a <= f) continue;
+			let h = Math.max(f, Math.min(a - 1, l + (u >> 1)));
+			if (s) {
+				m(h);
+				continue;
+			}
+			let g = c && a - f >= d ? this.pointIntervalMinMaxY(f, a) : null;
+			if (!(g && (g.maxY < n || g.minY > r))) {
+				if (g && g.minY >= n && g.maxY <= r) {
+					m(h);
+					continue;
+				}
+				for (let e = f; e < a; e++) {
+					let t = this.dataset.getY(e);
+					if (t < n || t > r) continue;
+					let a = p * 2;
+					i[a] = this.dataset.getX(e) - o, i[a + 1] = t, p++;
+					break;
+				}
+			}
+		}
+		return p;
+	}
+	stableScatterBucketWidth(e, t) {
+		let n = Math.max(1, Math.ceil(e / Math.max(1, t)));
+		return n <= 8 ? n : Math.ceil(n / 8) * 8;
+	}
+	copyVisiblePointsExact(e, t, n, r, i, a, o) {
+		let s = 0, c = !1, l = this.hasPointIntervalBounds(), d = (e) => {
+			let t = this.dataset.getY(e);
+			if (t < n || t > r) return !0;
+			if (s >= a) return c = !0, !1;
+			let l = s * 2;
+			return i[l] = this.dataset.getX(e) - o, i[l + 1] = t, s++, !0;
+		}, f = (e, t) => {
+			for (let n = e; n < t; n++) if (!d(n)) return !1;
+			return !0;
+		}, p = (e, t) => {
+			if (t <= e) return !0;
+			let i = l ? this.pointIntervalMinMaxY(e, t) : null;
+			if (i && (i.maxY < n || i.minY > r)) return !0;
+			if (t - e <= u || !l) return f(e, t);
+			let a = e + (t - e >> 1);
+			return p(e, a) && p(a, t);
+		};
+		return p(e, t), {
+			count: s,
+			overflow: c
+		};
 	}
 	copyVisibleSamples(e, t, n, r, i, a) {
+		if (s(this.dataset)) return this.dataset.copyVisibleSamples(e, t, n, r, i, a);
 		let o = r === "points" ? 2 : 4;
 		if (n <= 0 || t.length < n * o) return 0;
-		let s = this.dataset.lowerBoundX(e.xMin), c = this.dataset.upperBoundX(e.xMax), l = c - s;
-		if (l <= 0) return 0;
-		let u = Math.max(1, Math.ceil(l / n)), d = 0;
-		for (let e = s; e < c && d < n; e += u) {
+		let c = this.dataset.lowerBoundX(e.xMin), l = this.dataset.upperBoundX(e.xMax), u = l - c;
+		if (u <= 0) return 0;
+		let d = Math.max(1, Math.ceil(u / n)), f = 0;
+		for (let e = c; e < l && f < n; e += d) {
 			let n = this.dataset.getX(e) - a, o = this.dataset.getY(e);
 			if (r === "points") {
-				let e = d * 2;
+				let e = f * 2;
 				t[e] = n, t[e + 1] = o;
 			} else {
-				let e = d * 4;
+				let e = f * 4;
 				t[e] = n, t[e + 1] = i, t[e + 2] = n, t[e + 3] = o;
 			}
-			d++;
+			f++;
 		}
-		return d;
-	}
-	copySampleRange(e, t, n, r, i, a, o) {
-		let s = i === "points" ? 2 : 4;
-		if (r <= 0 || n.length < r * s) return 0;
-		let c = Math.max(0, Math.floor(e)), l = Math.min(this.dataset.length, Math.ceil(t)), u = Math.min(r, Math.max(0, l - c));
-		for (let e = 0; e < u; e++) {
-			let t = c + e, r = this.dataset.getX(t) - o, s = this.dataset.getY(t);
+		return f;
+	}
+	copySampleRange(e, t, n, r, i, o, s) {
+		if (a(this.dataset)) return this.dataset.copySamplesRange(e, t, n, r, i, o, s);
+		let c = i === "points" ? 2 : 4;
+		if (r <= 0 || n.length < r * c) return 0;
+		let l = Math.max(0, Math.floor(e)), u = Math.min(this.dataset.length, Math.ceil(t)), d = Math.min(r, Math.max(0, u - l));
+		for (let e = 0; e < d; e++) {
+			let t = l + e, r = this.dataset.getX(t) - s, a = this.dataset.getY(t);
 			if (i === "points") {
 				let t = e * 2;
-				n[t] = r, n[t + 1] = s;
+				n[t] = r, n[t + 1] = a;
 			} else {
 				let t = e * 4;
-				n[t] = r, n[t + 1] = a, n[t + 2] = r, n[t + 3] = s;
+				n[t] = r, n[t + 1] = o, n[t + 2] = r, n[t + 3] = a;
 			}
 		}
-		return u;
+		return d;
 	}
 	copyMinMaxSegments(e, t, n, r, i) {
+		if (o(this.dataset)) return this.dataset.copyMinMaxSegments(e, t, n, r, i);
 		let a = r === "line-list" ? 4 : 3;
 		if (!this.pyramid || n <= 0 || t.length < n * a) return 0;
-		let o = this.dataset.lowerBoundX(e.xMin), s = this.dataset.upperBoundX(e.xMax), c = s - o;
-		if (c <= 0) return 0;
-		let l = Math.min(n, c);
-		for (let e = 0; e < l; e++) {
-			let n = o + Math.floor(e * c / l), a = o + Math.max(Math.floor((e + 1) * c / l), Math.floor(e * c / l) + 1), u = Math.min(s, a), d = this.minMaxForRange(n, u);
+		let s = this.dataset.lowerBoundX(e.xMin), c = this.dataset.upperBoundX(e.xMax), l = c - s;
+		if (l <= 0) return 0;
+		let u = Math.min(n, l);
+		for (let e = 0; e < u; e++) {
+			let n = s + Math.floor(e * l / u), a = s + Math.max(Math.floor((e + 1) * l / u), Math.floor(e * l / u) + 1), o = Math.min(c, a), d = this.minMaxForRange(n, o);
 			if (!d) continue;
-			let f = this.dataset.getX(n + (u - n >> 1)) - i, { minY: p, maxY: m } = d;
+			let f = this.dataset.getX(n + (o - n >> 1)) - i, { minY: p, maxY: m } = d;
 			if (r === "line-list") {
 				let n = e * 4;
 				t[n] = f, t[n + 1] = p, t[n + 2] = f, t[n + 3] = m;
@@ -376,7 +550,7 @@ var o = class {
 				t[n] = f, t[n + 1] = p, t[n + 2] = m;
 			}
 		}
-		return l;
+		return u;
 	}
 	minMaxForRange(e, t) {
 		return this._useDatasetRangeMinMax && r(this.dataset) ? this.dataset.rangeMinMaxY(e, t) : !this.pyramid || this._useRawMinMaxScan ? this.rawMinMaxForRange(e, t) : this.pyramid.rangeMinMax(this.dataset, e, t);
@@ -417,7 +591,7 @@ var o = class {
 };
 //#endregion
 //#region src/core/search.ts
-function s(e, t, n) {
+function m(e, t, n) {
 	let r = 0, i = e;
 	for (; r < i;) {
 		let e = r + (i - r >> 1);
@@ -425,7 +599,7 @@ function s(e, t, n) {
 	}
 	return r;
 }
-function c(e, t, n) {
+function h(e, t, n) {
 	let r = 0, i = e;
 	for (; r < i;) {
 		let e = r + (i - r >> 1);
@@ -435,7 +609,7 @@ function c(e, t, n) {
 }
 //#endregion
 //#region src/core/RingBuffer.ts
-var l = class e {
+var g = class e {
 	capacity;
 	_length = 0;
 	_head = 0;
@@ -497,10 +671,10 @@ var l = class e {
 		return this.assertValidIndex(e), this.yData[this.logicalToPhysical(e)];
 	}
 	lowerBoundX(e) {
-		return s(this._length, (e) => this.getX(e), e);
+		return m(this._length, (e) => this.getX(e), e);
 	}
 	upperBoundX(e) {
-		return c(this._length, (e) => this.getX(e), e);
+		return h(this._length, (e) => this.getX(e), e);
 	}
 	rangeMinMaxY(e, t) {
 		let n = Math.max(0, Math.floor(e)), r = Math.min(this._length, Math.ceil(t));
@@ -577,32 +751,32 @@ var l = class e {
 	static nextPowerOfTwo(e) {
 		return 2 ** Math.ceil(Math.log2(e));
 	}
-}, u = "attribute vec2 position;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", d = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", f = "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\nattribute float aSelect;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  float y = (aSelect < 0.5) ? aMinY : aMaxY;\n  vec2 position = vec2(aX, y);\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", p = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", m = "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform vec2 uCanvasSize;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 centerClip = aPosition * uScale + uOffset;\n  vec2 pointSizeClip = vec2(2.0 / uCanvasSize.x, 2.0 / uCanvasSize.y) * uPointSize * 0.5;\n  vec2 clipSpace = centerClip + aCorner * pointSizeClip;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", h = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", g = "attribute vec2 aPosition;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 clipSpace = aPosition * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n  gl_PointSize = uPointSize;\n}\n", _ = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  vec2 p = gl_PointCoord * 2.0 - 1.0;\n  if (dot(p, p) > 1.0) discard;\n  gl_FragColor = uColor;\n}\n", v = "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uBarWidth;\nuniform float uBaseline;\n\nvoid main() {\n  float x = aPosition.x + aCorner.x * uBarWidth;\n  float y = mix(uBaseline, aPosition.y, aCorner.y);\n  vec2 clipSpace = vec2(x, y) * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", y = "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uBarWidth;\n\nvoid main() {\n  float x = aX + aCorner.x * uBarWidth;\n  float y = mix(aMinY, aMaxY, aCorner.y);\n  vec2 clipSpace = vec2(x, y) * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", b = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", x = {
+}, _ = "attribute vec2 position;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", v = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", y = "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\nattribute float aSelect;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  float y = (aSelect < 0.5) ? aMinY : aMaxY;\n  vec2 position = vec2(aX, y);\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", b = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", x = "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform vec2 uCanvasSize;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 centerClip = aPosition * uScale + uOffset;\n  vec2 pointSizeClip = vec2(2.0 / uCanvasSize.x, 2.0 / uCanvasSize.y) * uPointSize * 0.5;\n  vec2 clipSpace = centerClip + aCorner * pointSizeClip;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", S = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", C = "attribute vec2 aPosition;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 clipSpace = aPosition * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n  gl_PointSize = uPointSize;\n}\n", ee = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  vec2 p = gl_PointCoord * 2.0 - 1.0;\n  if (dot(p, p) > 1.0) discard;\n  gl_FragColor = uColor;\n}\n", te = "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uBarWidth;\nuniform float uBaseline;\n\nvoid main() {\n  float x = aPosition.x + aCorner.x * uBarWidth;\n  float y = mix(uBaseline, aPosition.y, aCorner.y);\n  vec2 clipSpace = vec2(x, y) * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", ne = "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uBarWidth;\n\nvoid main() {\n  float x = aX + aCorner.x * uBarWidth;\n  float y = mix(aMinY, aMaxY, aCorner.y);\n  vec2 clipSpace = vec2(x, y) * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n", w = "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n", T = {
 	line: {
-		vert: u,
-		frag: d
+		vert: _,
+		frag: v
 	},
 	segment: {
-		vert: f,
-		frag: p
+		vert: y,
+		frag: b
 	},
 	point: {
-		vert: m,
-		frag: h
+		vert: x,
+		frag: S
 	},
 	pointSprite: {
-		vert: g,
-		frag: _
+		vert: C,
+		frag: ee
 	},
 	bar: {
-		vert: v,
-		frag: b
+		vert: te,
+		frag: w
 	},
 	barRange: {
-		vert: y,
-		frag: b
+		vert: ne,
+		frag: w
 	}
-}, S = 3, C = 2, w = 4, T = 4, E = .8, ee = 0, te = class {
+}, E = 3, D = 2, O = 4, k = 4, A = .8, re = 0, ie = class {
 	backend;
 	lineProgram;
 	segmentProgram;
@@ -618,7 +792,7 @@ var l = class e {
 	canvasSizeUniform = new Float32Array(2);
 	xOrigin = 0;
 	constructor(e) {
-		this.backend = e, this.lineProgram = this.backend.createProgram(x.line.vert, x.line.frag), this.segmentProgram = this.backend.createProgram(x.segment.vert, x.segment.frag), this.pointProgram = this.backend.createProgram(x.point.vert, x.point.frag), this.pointSpriteProgram = this.backend.createProgram(x.pointSprite.vert, x.pointSprite.frag), this.barProgram = this.backend.createProgram(x.bar.vert, x.bar.frag), this.barRangeProgram = this.backend.createProgram(x.barRange.vert, x.barRange.frag), this.segmentSelectBuffer = this.backend.createBuffer({
+		this.backend = e, this.lineProgram = this.backend.createProgram(T.line.vert, T.line.frag), this.segmentProgram = this.backend.createProgram(T.segment.vert, T.segment.frag), this.pointProgram = this.backend.createProgram(T.point.vert, T.point.frag), this.pointSpriteProgram = this.backend.createProgram(T.pointSprite.vert, T.pointSprite.frag), this.barProgram = this.backend.createProgram(T.bar.vert, T.bar.frag), this.barRangeProgram = this.backend.createProgram(T.barRange.vert, T.barRange.frag), this.segmentSelectBuffer = this.backend.createBuffer({
 			usage: "static",
 			type: "float",
 			length: 2
@@ -679,6 +853,9 @@ var l = class e {
 	setXOrigin(e) {
 		this.xOrigin = Number.isFinite(e) ? e : 0;
 	}
+	getWebGLContext() {
+		return this.backend.getContext?.() ?? null;
+	}
 	drawLines(e, t, n, r) {
 		this.drawLinePrimitive("lines", e, t, n, r);
 	}
@@ -696,7 +873,7 @@ var l = class e {
 	}
 	drawMinMaxSegmentsInstanced(e, t, n, r) {
 		this.writeCameraUniforms(r);
-		let i = S * w, a = {
+		let i = E * O, a = {
 			buffer: e,
 			divisor: 1,
 			stride: i,
@@ -705,16 +882,16 @@ var l = class e {
 			buffer: e,
 			divisor: 1,
 			stride: i,
-			offset: w
+			offset: O
 		}, s = {
 			buffer: e,
 			divisor: 1,
 			stride: i,
-			offset: w * 2
+			offset: O * 2
 		}, c = {
 			buffer: this.segmentSelectBuffer,
 			divisor: 0,
-			stride: w,
+			stride: O,
 			offset: 0
 		};
 		this.backend.draw({
@@ -743,13 +920,13 @@ var l = class e {
 		let o = {
 			buffer: e,
 			divisor: 1,
-			stride: C * w,
+			stride: D * O,
 			offset: 0,
 			size: 2
 		}, s = {
 			buffer: this.pointCornerBuffer,
 			divisor: 0,
-			stride: C * w,
+			stride: D * O,
 			offset: 0,
 			size: 2
 		};
@@ -766,7 +943,7 @@ var l = class e {
 				uScale: this.scaleUniform,
 				uOffset: this.offsetUniform,
 				uCanvasSize: this.canvasSizeUniform,
-				uPointSize: n.pointSize ?? T,
+				uPointSize: n.pointSize ?? k,
 				uColor: n.color
 			}
 		});
@@ -780,7 +957,7 @@ var l = class e {
 			uniforms: {
 				uScale: this.scaleUniform,
 				uOffset: this.offsetUniform,
-				uPointSize: n.pointSize ?? T,
+				uPointSize: n.pointSize ?? k,
 				uColor: n.color
 			}
 		});
@@ -803,13 +980,13 @@ var l = class e {
 		let i = {
 			buffer: e,
 			divisor: 1,
-			stride: C * w,
+			stride: D * O,
 			offset: 0,
 			size: 2
 		}, a = {
 			buffer: this.barCornerBuffer,
 			divisor: 0,
-			stride: C * w,
+			stride: D * O,
 			offset: 0,
 			size: 2
 		};
@@ -825,15 +1002,15 @@ var l = class e {
 			uniforms: {
 				uScale: this.scaleUniform,
 				uOffset: this.offsetUniform,
-				uBarWidth: n.barWidth ?? E,
-				uBaseline: n.baseline ?? ee,
+				uBarWidth: n.barWidth ?? A,
+				uBaseline: n.baseline ?? re,
 				uColor: n.color
 			}
 		});
 	}
 	drawBarRangesInstanced(e, t, n, r) {
 		this.writeCameraUniforms(r);
-		let i = S * w, a = {
+		let i = E * O, a = {
 			buffer: e,
 			divisor: 1,
 			stride: i,
@@ -842,16 +1019,16 @@ var l = class e {
 			buffer: e,
 			divisor: 1,
 			stride: i,
-			offset: w
+			offset: O
 		}, s = {
 			buffer: e,
 			divisor: 1,
 			stride: i,
-			offset: w * 2
+			offset: O * 2
 		}, c = {
 			buffer: this.barCornerBuffer,
 			divisor: 0,
-			stride: C * w,
+			stride: D * O,
 			offset: 0,
 			size: 2
 		};
@@ -869,7 +1046,7 @@ var l = class e {
 			uniforms: {
 				uScale: this.scaleUniform,
 				uOffset: this.offsetUniform,
-				uBarWidth: n.barWidth ?? E,
+				uBarWidth: n.barWidth ?? A,
 				uColor: n.color
 			}
 		});
@@ -923,13 +1100,13 @@ var l = class e {
 	dispose() {
 		this.backend.destroy();
 	}
-}, D = [
+}, j = [
 	1024,
 	4096,
 	16384,
 	32768,
 	131072
-], O = class {
+], ae = class {
 	regl;
 	pool = [];
 	preAllocated = !1;
@@ -942,7 +1119,7 @@ var l = class e {
 	preAllocate() {
 		if (!this.preAllocated) {
 			this.preAllocated = !0;
-			for (let e of D) this.pool.push(this.createEntry(e, "stream"));
+			for (let e of j) this.pool.push(this.createEntry(e, "stream"));
 		}
 	}
 	acquire(e, t = "stream") {
@@ -982,17 +1159,17 @@ var l = class e {
 		return this.pool.find((t) => !t.inUse && t.floatCapacity >= e);
 	}
 	roundUp(e) {
-		for (let t of D) if (t >= e) return t;
-		let t = D[D.length - 1], n = 1 << 32 - Math.clz32(e - 1);
+		for (let t of j) if (t >= e) return t;
+		let t = j[j.length - 1], n = 1 << 32 - Math.clz32(e - 1);
 		return Math.max(t * 2, n);
 	}
 };
 //#endregion
 //#region src/render/ReglBackend.ts
-function k(e) {
+function oe(e) {
 	return e;
 }
-var A = class {
+var se = class {
 	gl;
 	regl;
 	resources;
@@ -1012,10 +1189,10 @@ var A = class {
 		});
 		if (!n) throw Error("BlazePlot requires WebGL2, but this browser/context does not support it.");
 		this.gl = n, this.regl = e({
-			gl: k(this.gl),
+			gl: oe(this.gl),
 			extensions: [],
 			optionalExtensions: ["angle_instanced_arrays", "ext_disjoint_timer_query_webgl2"]
-		}), this.capabilities = { instancing: this.regl.hasExtension("angle_instanced_arrays") }, this.resources = new O(this.regl), this.resources.preAllocate();
+		}), this.capabilities = { instancing: this.regl.hasExtension("angle_instanced_arrays") }, this.resources = new ae(this.regl), this.resources.preAllocate();
 	}
 	createBuffer(e) {
 		let { buffer: t } = this.resources.acquire(e.length, e.usage);
@@ -1081,6 +1258,9 @@ var A = class {
 			h: r
 		};
 	}
+	getContext() {
+		return this.gl;
+	}
 	destroy() {
 		this.resources.destroy(), this.regl.destroy();
 	}
@@ -1134,7 +1314,7 @@ var A = class {
 			default: return e;
 		}
 	}
-}, j = class e {
+}, M = class e {
 	_xMin = 0;
 	_xMax = 1;
 	_yMin = 0;
@@ -1219,7 +1399,7 @@ var A = class {
 	static assertFinite(e, t) {
 		if (!Number.isFinite(t)) throw RangeError(`Camera2D ${e} must be finite.`);
 	}
-}, M = class {
+}, N = class {
 	camera;
 	constructor(e) {
 		this.camera = e;
@@ -1251,33 +1431,39 @@ var A = class {
 		let n = Math.max(0, -Math.floor(Math.log10(t)) + 2), r = Number(e.toFixed(n));
 		return Object.is(r, -0) ? 0 : r;
 	}
-}, N = class {
+}, P = class {
 	layout;
 	config;
 	options;
 	xPool = [];
 	yPool = [];
+	y2Pool = [];
 	xTicks = [];
 	yTicks = [];
+	y2Ticks = [];
 	constructor(e, t, n = {}) {
 		this.layout = e, this.config = t, this.options = n;
 	}
 	setOptions(e) {
 		this.options = e;
-		for (let e of this.xPool) e.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", e.style.color = this.options.color ?? "#bfd6ff";
-		for (let e of this.yPool) e.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", e.style.color = this.options.color ?? "#bfd6ff";
+		for (let e of [
+			...this.xPool,
+			...this.yPool,
+			...this.y2Pool
+		]) e.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", e.style.color = this.options.color ?? "#bfd6ff";
 	}
-	update(e, t) {
-		let n = Math.max(1, this.layout.plot.clientWidth), r = Math.max(1, this.layout.plot.clientHeight);
-		this.config.x.visible ? t.getXTickValues(n, 12, this.xTicks) : this.xTicks.length = 0, this.config.y.visible ? t.getYTickValues(r, 8, this.yTicks) : this.yTicks.length = 0, this.updateAxis(this.xPool, this.xTicks, "x", e, n, r, t), this.updateAxis(this.yPool, this.yTicks, "y", e, n, r, t);
+	update(e, t, n = e, r = t) {
+		let i = Math.max(1, this.layout.plot.clientWidth), a = Math.max(1, this.layout.plot.clientHeight);
+		this.config.x.visible ? t.getXTickValues(i, 12, this.xTicks) : this.xTicks.length = 0, this.config.y.visible ? t.getYTickValues(a, 8, this.yTicks) : this.yTicks.length = 0, this.config.y2.visible ? r.getYTickValues(a, 8, this.y2Ticks) : this.y2Ticks.length = 0, this.updateAxis(this.xPool, this.xTicks, "x", e, i, a, t), this.updateAxis(this.yPool, this.yTicks, "y", e, i, a, t), this.updateAxis(this.y2Pool, this.y2Ticks, "y2", n, i, a, r);
 	}
 	dispose() {
 		for (let e of this.xPool) e.remove();
 		for (let e of this.yPool) e.remove();
-		this.xPool = [], this.yPool = [];
+		for (let e of this.y2Pool) e.remove();
+		this.xPool = [], this.yPool = [], this.y2Pool = [];
 	}
 	parentForAxis(e) {
-		return e === "x" ? this.config.x.position === "outside" ? this.layout.xAxis : this.layout.plot : this.config.y.position === "outside" ? this.layout.yAxis : this.layout.plot;
+		return e === "x" ? this.config.x.position === "outside" ? this.layout.xAxis : this.layout.plot : e === "y2" ? this.config.y2.position === "outside" ? this.layout.y2Axis : this.layout.plot : this.config.y.position === "outside" ? this.layout.yAxis : this.layout.plot;
 	}
 	updateAxis(e, t, n, r, i, a, o) {
 		let s = this.parentForAxis(n);
@@ -1293,53 +1479,55 @@ var A = class {
 				let [e] = r.toClip(l, r.yMin), t = (e + 1) * .5 * i;
 				c.style.left = `${t}px`, c.style.right = "auto", c.style.transform = "translateX(-50%)", this.config.x.position === "outside" ? (c.style.top = "4px", c.style.bottom = "auto") : (c.style.top = "auto", c.style.bottom = "4px");
 			} else {
-				let [, e] = r.toClip(r.xMin, l), t = (1 - e) * .5 * a;
-				c.style.top = `${t}px`, c.style.bottom = "auto", c.style.transform = "translateY(-50%)", this.config.y.position === "outside" ? (c.style.left = "auto", c.style.right = "4px") : (c.style.left = "4px", c.style.right = "auto");
+				let e = n === "y2", t = e ? this.config.y2 : this.config.y, [, i] = r.toClip(r.xMin, l), o = (1 - i) * .5 * a;
+				c.style.top = `${o}px`, c.style.bottom = "auto", c.style.transform = "translateY(-50%)", t.position === "outside" ? (c.style.left = e ? "4px" : "auto", c.style.right = e ? "auto" : "4px") : (c.style.left = e ? "auto" : "4px", c.style.right = e ? "4px" : "auto");
 			}
 		}
 	}
-}, ne = class {
+}, ce = class {
 	root;
 	plot;
 	canvas;
 	xAxis;
 	yAxis;
+	y2Axis;
 	corner;
+	cornerRight;
 	externalCanvas;
 	originalCanvasCssText;
 	originalCanvasParent;
 	constructor(e, t) {
 		let n = e instanceof HTMLCanvasElement ? e : null;
-		this.externalCanvas = n !== null, this.originalCanvasCssText = n?.style.cssText ?? "", this.originalCanvasParent = n?.parentElement ?? null, this.root = document.createElement("div"), this.plot = document.createElement("div"), this.canvas = n ?? document.createElement("canvas"), this.xAxis = document.createElement("div"), this.yAxis = document.createElement("div"), this.corner = document.createElement("div"), this.root.className = "blazeplot-root", this.plot.className = "blazeplot-plot", this.canvas.classList.add("blazeplot-canvas"), this.xAxis.className = "blazeplot-axis blazeplot-axis-x", this.yAxis.className = "blazeplot-axis blazeplot-axis-y", this.corner.className = "blazeplot-axis-corner", this.applyBaseStyles(), this.mount(e), this.update(t);
+		this.externalCanvas = n !== null, this.originalCanvasCssText = n?.style.cssText ?? "", this.originalCanvasParent = n?.parentElement ?? null, this.root = document.createElement("div"), this.plot = document.createElement("div"), this.canvas = n ?? document.createElement("canvas"), this.xAxis = document.createElement("div"), this.yAxis = document.createElement("div"), this.y2Axis = document.createElement("div"), this.corner = document.createElement("div"), this.cornerRight = document.createElement("div"), this.root.className = "blazeplot-root", this.plot.className = "blazeplot-plot", this.canvas.classList.add("blazeplot-canvas"), this.xAxis.className = "blazeplot-axis blazeplot-axis-x", this.yAxis.className = "blazeplot-axis blazeplot-axis-y", this.y2Axis.className = "blazeplot-axis blazeplot-axis-y2", this.corner.className = "blazeplot-axis-corner", this.cornerRight.className = "blazeplot-axis-corner blazeplot-axis-corner-right", this.applyBaseStyles(), this.mount(e), this.update(t);
 	}
 	update(e) {
-		let t = e.y.visible && e.y.position === "outside", n = e.x.visible && e.x.position === "outside";
-		this.root.style.gridTemplateColumns = `${t ? 52 : 0}px minmax(0, 1fr)`, this.root.style.gridTemplateRows = `minmax(0, 1fr) ${n ? 28 : 0}px`, this.yAxis.style.display = t ? "block" : "none", this.xAxis.style.display = n ? "block" : "none", this.corner.style.display = n && t ? "block" : "none";
+		let t = e.y.visible && e.y.position === "outside", n = e.y2.visible && e.y2.position === "outside", r = e.x.visible && e.x.position === "outside";
+		this.root.style.gridTemplateColumns = `${t ? 52 : 0}px minmax(0, 1fr) ${n ? 52 : 0}px`, this.root.style.gridTemplateRows = `minmax(0, 1fr) ${r ? 28 : 0}px`, this.yAxis.style.display = t ? "block" : "none", this.y2Axis.style.display = n ? "block" : "none", this.xAxis.style.display = r ? "block" : "none", this.corner.style.display = r && t ? "block" : "none", this.cornerRight.style.display = r && n ? "block" : "none";
 	}
 	dispose() {
 		this.externalCanvas && this.originalCanvasParent && (this.canvas.style.cssText = this.originalCanvasCssText, this.originalCanvasParent.insertBefore(this.canvas, this.root)), this.root.remove();
 	}
 	mount(e) {
-		this.externalCanvas ? this.originalCanvasParent?.insertBefore(this.root, e) : e.appendChild(this.root), this.root.appendChild(this.yAxis), this.root.appendChild(this.plot), this.root.appendChild(this.corner), this.root.appendChild(this.xAxis), this.plot.appendChild(this.canvas);
+		this.externalCanvas ? this.originalCanvasParent?.insertBefore(this.root, e) : e.appendChild(this.root), this.root.appendChild(this.yAxis), this.root.appendChild(this.plot), this.root.appendChild(this.y2Axis), this.root.appendChild(this.corner), this.root.appendChild(this.xAxis), this.root.appendChild(this.cornerRight), this.plot.appendChild(this.canvas);
 	}
 	applyBaseStyles() {
-		this.root.style.position = "relative", this.root.style.display = "grid", this.root.style.width = "100%", this.root.style.height = "100%", this.root.style.minWidth = "0", this.root.style.minHeight = "0", this.root.style.overflow = "hidden", this.plot.style.position = "relative", this.plot.style.gridColumn = "2", this.plot.style.gridRow = "1", this.plot.style.minWidth = "0", this.plot.style.minHeight = "0", this.plot.style.overflow = "hidden", this.canvas.style.position = "absolute", this.canvas.style.inset = "0", this.canvas.style.display = "block", this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.touchAction = "none", this.yAxis.style.position = "relative", this.yAxis.style.gridColumn = "1", this.yAxis.style.gridRow = "1", this.yAxis.style.minWidth = "0", this.yAxis.style.minHeight = "0", this.yAxis.style.overflow = "hidden", this.yAxis.style.pointerEvents = "none", this.xAxis.style.position = "relative", this.xAxis.style.gridColumn = "2", this.xAxis.style.gridRow = "2", this.xAxis.style.minWidth = "0", this.xAxis.style.minHeight = "0", this.xAxis.style.overflow = "hidden", this.xAxis.style.pointerEvents = "none", this.corner.style.gridColumn = "1", this.corner.style.gridRow = "2", this.corner.style.minWidth = "0", this.corner.style.minHeight = "0", this.corner.style.pointerEvents = "none";
+		this.root.style.position = "relative", this.root.style.display = "grid", this.root.style.width = "100%", this.root.style.height = "100%", this.root.style.minWidth = "0", this.root.style.minHeight = "0", this.root.style.overflow = "hidden", this.plot.style.position = "relative", this.plot.style.gridColumn = "2", this.plot.style.gridRow = "1", this.plot.style.minWidth = "0", this.plot.style.minHeight = "0", this.plot.style.overflow = "hidden", this.canvas.style.position = "absolute", this.canvas.style.inset = "0", this.canvas.style.display = "block", this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.touchAction = "none", this.yAxis.style.position = "relative", this.yAxis.style.gridColumn = "1", this.yAxis.style.gridRow = "1", this.yAxis.style.minWidth = "0", this.yAxis.style.minHeight = "0", this.yAxis.style.overflow = "hidden", this.yAxis.style.pointerEvents = "none", this.y2Axis.style.position = "relative", this.y2Axis.style.gridColumn = "3", this.y2Axis.style.gridRow = "1", this.y2Axis.style.minWidth = "0", this.y2Axis.style.minHeight = "0", this.y2Axis.style.overflow = "hidden", this.y2Axis.style.pointerEvents = "none", this.xAxis.style.position = "relative", this.xAxis.style.gridColumn = "2", this.xAxis.style.gridRow = "2", this.xAxis.style.minWidth = "0", this.xAxis.style.minHeight = "0", this.xAxis.style.overflow = "hidden", this.xAxis.style.pointerEvents = "none", this.corner.style.gridColumn = "1", this.corner.style.gridRow = "2", this.corner.style.minWidth = "0", this.corner.style.minHeight = "0", this.corner.style.pointerEvents = "none", this.cornerRight.style.gridColumn = "3", this.cornerRight.style.gridRow = "2", this.cornerRight.style.minWidth = "0", this.cornerRight.style.minHeight = "0", this.cornerRight.style.pointerEvents = "none";
 	}
-}, P = {
+}, F = {
 	backgroundColor: [
-		.08,
-		.1,
-		.16,
+		.02,
+		.02,
+		.02,
 		1
 	],
-	backgroundCssColor: "rgba(20, 26, 41, 1)",
+	backgroundCssColor: "rgba(5, 5, 5, 1)",
 	gridColor: [
 		.22,
-		.3,
-		.44,
+		.22,
+		.22,
 		.45
 	],
-	axisColor: "#bfd6ff",
+	axisColor: "#d4d4d4",
 	axisFont: "11px ui-monospace, monospace, sans-serif",
 	seriesColors: [
 		[
@@ -1379,48 +1567,48 @@ var A = class {
 			1
 		]
 	],
-	tooltipBackgroundColor: "rgba(4, 8, 16, 0.85)",
-	tooltipTextColor: "#bfd6ff",
+	tooltipBackgroundColor: "rgba(10, 10, 10, 0.88)",
+	tooltipTextColor: "#e5e5e5",
 	tooltipFont: "11px/1.35 ui-monospace, monospace",
-	legendBackgroundColor: "rgba(4, 8, 16, 0.85)",
+	legendBackgroundColor: "rgba(10, 10, 10, 0.88)",
 	legendBorderColor: "transparent",
-	legendTextColor: "#bfd6ff",
-	legendMutedTextColor: "#789",
+	legendTextColor: "#e5e5e5",
+	legendMutedTextColor: "#888",
 	legendFont: "11px/1.35 ui-monospace, monospace"
 };
-function F(e, t) {
-	if (!e) return P;
-	let n = I(e.backgroundColor, P.backgroundColor, t), r = e.seriesColors?.length ? e.seriesColors.map((e, n) => I(e, P.seriesColors[n % P.seriesColors.length], t)) : P.seriesColors;
+function I(e, t) {
+	if (!e) return F;
+	let n = L(e.backgroundColor, F.backgroundColor, t), r = e.seriesColors?.length ? e.seriesColors.map((e, n) => L(e, F.seriesColors[n % F.seriesColors.length], t)) : F.seriesColors;
 	return {
 		backgroundColor: n,
-		backgroundCssColor: L(e.backgroundColor, P.backgroundCssColor),
-		gridColor: I(e.gridColor, P.gridColor, t),
-		axisColor: e.axisColor ?? P.axisColor,
-		axisFont: e.axisFont ?? P.axisFont,
+		backgroundCssColor: le(e.backgroundColor, F.backgroundCssColor),
+		gridColor: L(e.gridColor, F.gridColor, t),
+		axisColor: e.axisColor ?? F.axisColor,
+		axisFont: e.axisFont ?? F.axisFont,
 		seriesColors: r,
-		tooltipBackgroundColor: e.tooltipBackgroundColor ?? P.tooltipBackgroundColor,
-		tooltipTextColor: e.tooltipTextColor ?? P.tooltipTextColor,
-		tooltipFont: e.tooltipFont ?? P.tooltipFont,
-		legendBackgroundColor: e.legendBackgroundColor ?? P.legendBackgroundColor,
-		legendBorderColor: e.legendBorderColor ?? P.legendBorderColor,
-		legendTextColor: e.legendTextColor ?? P.legendTextColor,
-		legendMutedTextColor: e.legendMutedTextColor ?? P.legendMutedTextColor,
-		legendFont: e.legendFont ?? P.legendFont
+		tooltipBackgroundColor: e.tooltipBackgroundColor ?? F.tooltipBackgroundColor,
+		tooltipTextColor: e.tooltipTextColor ?? F.tooltipTextColor,
+		tooltipFont: e.tooltipFont ?? F.tooltipFont,
+		legendBackgroundColor: e.legendBackgroundColor ?? F.legendBackgroundColor,
+		legendBorderColor: e.legendBorderColor ?? F.legendBorderColor,
+		legendTextColor: e.legendTextColor ?? F.legendTextColor,
+		legendMutedTextColor: e.legendMutedTextColor ?? F.legendMutedTextColor,
+		legendFont: e.legendFont ?? F.legendFont
 	};
 }
-function I(e, t, n) {
+function L(e, t, n) {
 	if (!e) return t;
 	if (typeof e != "string") return e;
-	let r = re(e, n), i = B(r ?? e, n);
+	let r = ue(e, n), i = de(r ?? e, n);
 	return z(r ?? e) ?? z(i ?? "") ?? t;
 }
-function L(e, t) {
+function le(e, t) {
 	return e ? typeof e == "string" ? e : R(e) : t;
 }
 function R(e) {
 	return `rgba(${Math.round(e[0] * 255)}, ${Math.round(e[1] * 255)}, ${Math.round(e[2] * 255)}, ${e[3]})`;
 }
-function re(e, t) {
+function ue(e, t) {
 	let n = t?.ownerDocument ?? globalThis.document;
 	if (!n?.documentElement || typeof getComputedStyle > "u") return null;
 	let r = t instanceof HTMLElement ? t : n.documentElement, i = n.createElement("span");
@@ -1430,9 +1618,9 @@ function re(e, t) {
 }
 function z(e) {
 	let t = e.trim();
-	return ie(t) ?? ae(t) ?? oe(t);
+	return fe(t) ?? pe(t) ?? me(t);
 }
-function B(e, t) {
+function de(e, t) {
 	let n = t?.ownerDocument ?? globalThis.document;
 	if (!n?.createElement) return null;
 	let r = n.createElement("canvas").getContext("2d");
@@ -1442,12 +1630,12 @@ function B(e, t) {
 	let a = String(r.fillStyle);
 	return a === i ? null : a;
 }
-function ie(e) {
+function fe(e) {
 	let t = e.match(/^rgba?\((.*)\)$/i);
 	if (!t) return null;
 	let n = t[1].trim().split("/").map((e) => e.trim()), r = n[0], i = n[1], a = r.includes(",") ? r.split(",").map((e) => e.trim()).filter(Boolean) : r.split(/\s+/).filter(Boolean);
 	if (a.length < 3) return null;
-	let o = V(a[0]), s = V(a[1]), c = V(a[2]), l = U(i ?? (a.length > 3 ? a[3] : void 0));
+	let o = B(a[0]), s = B(a[1]), c = B(a[2]), l = H(i ?? (a.length > 3 ? a[3] : void 0));
 	return o === null || s === null || c === null || l === null ? null : [
 		o,
 		s,
@@ -1455,12 +1643,12 @@ function ie(e) {
 		l
 	];
 }
-function ae(e) {
+function pe(e) {
 	let t = e.match(/^color\(\s*srgb\s+(.+)\)$/i);
 	if (!t) return null;
 	let n = t[1].split("/").map((e) => e.trim()), r = n[0].split(/\s+/).filter(Boolean);
 	if (r.length < 3) return null;
-	let i = H(r[0]), a = H(r[1]), o = H(r[2]), s = U(n[1]);
+	let i = V(r[0]), a = V(r[1]), o = V(r[2]), s = H(n[1]);
 	return i === null || a === null || o === null || s === null ? null : [
 		i,
 		a,
@@ -1468,7 +1656,7 @@ function ae(e) {
 		s
 	];
 }
-function oe(e) {
+function me(e) {
 	let t = e.startsWith("#") ? e.slice(1) : "";
 	if (![
 		3,
@@ -1484,21 +1672,21 @@ function oe(e) {
 		n.length === 8 ? (r & 255) / 255 : 1
 	] : null;
 }
+function B(e) {
+	return e.endsWith("%") ? U(Number.parseFloat(e) / 100) : U(Number.parseFloat(e) / 255);
+}
 function V(e) {
-	return e.endsWith("%") ? W(Number.parseFloat(e) / 100) : W(Number.parseFloat(e) / 255);
+	return e.endsWith("%") ? U(Number.parseFloat(e) / 100) : U(Number.parseFloat(e));
 }
 function H(e) {
-	return e.endsWith("%") ? W(Number.parseFloat(e) / 100) : W(Number.parseFloat(e));
+	return e ? e.endsWith("%") ? U(Number.parseFloat(e) / 100) : U(Number.parseFloat(e)) : 1;
 }
 function U(e) {
-	return e ? e.endsWith("%") ? W(Number.parseFloat(e) / 100) : W(Number.parseFloat(e)) : 1;
-}
-function W(e) {
 	return Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : null;
 }
 //#endregion
 //#region src/ui/Chart.ts
-var G = 16384, K = G >> 1, q = G >> 1, J = 3, Y = 4096, X = 12, se = 12, Z = 64;
+var W = 16384, G = W >> 1, K = W >> 1, q = 3, J = 4096, Y = 12, he = 12, X = 5, Z = 64, ge = 4, _e = W * 4;
 function Q(e) {
 	return e === !1 ? {
 		visible: !1,
@@ -1520,6 +1708,10 @@ function $(e) {
 		y: {
 			visible: !1,
 			position: "inside"
+		},
+		y2: {
+			visible: !1,
+			position: "inside"
 		}
 	} : e === !0 || e === void 0 ? {
 		x: {
@@ -1529,17 +1721,24 @@ function $(e) {
 		y: {
 			visible: !0,
 			position: "inside"
+		},
+		y2: {
+			visible: !1,
+			position: "inside"
 		}
 	} : {
 		x: Q(e.x),
-		y: Q(e.y)
+		y: Q(e.y),
+		y2: Q(e.y2 ?? !1)
 	};
 }
-var ce = class {
+var ve = class {
 	options;
 	series = [];
 	camera;
+	rightCamera;
 	axis;
+	rightAxis;
 	renderer;
 	rawLineBuffer;
 	rawLineData;
@@ -1570,6 +1769,7 @@ var ce = class {
 	hoverSubscribers = /* @__PURE__ */ new Set();
 	seriesSubscribers = /* @__PURE__ */ new Set();
 	themeSubscribers = /* @__PURE__ */ new Set();
+	renderSubscribers = /* @__PURE__ */ new Set();
 	currentHover = null;
 	lastPointerClientX = 0;
 	lastPointerClientY = 0;
@@ -1584,10 +1784,10 @@ var ce = class {
 		this.pointerInPlot = !1, this.emitHover(null);
 	};
 	constructor(e, t = {}) {
-		this.options = t, this.resolvedTheme = F(t.theme, e), this.normalizedAxes = $(t.axes), this._gridVisible = t.grid !== !1, this.layout = new ne(e, this.normalizedAxes), this.layout.root.style.background = this.resolvedTheme.backgroundCssColor, this.applyCanvasSize(), this.camera = new j(), this.axis = new M(this.camera), this.renderer = new te(new A(this.layout.canvas)), this.rawLineData = new Float32Array(G * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.minMaxInstanceData = new Float32Array(q * J), this.minMaxInstanceBuffer = this.renderer.createFloatBuffer(this.minMaxInstanceData.length), this.barTriangleData = new Float32Array(Y * X), this.barTriangleBuffer = this.renderer.createFloatBuffer(this.barTriangleData.length), this.gridData = new Float32Array(Z * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
+		this.options = t, this.resolvedTheme = I(t.theme, e), this.normalizedAxes = $(t.axes), this._gridVisible = t.grid !== !1, this.layout = new ce(e, this.normalizedAxes), this.layout.root.style.background = this.resolvedTheme.backgroundCssColor, this.applyCanvasSize(), this.camera = new M(), this.rightCamera = new M(), this.axis = new N(this.camera), this.rightAxis = new N(this.rightCamera), this.renderer = new ie(new se(this.layout.canvas)), this.rawLineData = new Float32Array(W * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.minMaxInstanceData = new Float32Array(K * q), this.minMaxInstanceBuffer = this.renderer.createFloatBuffer(this.minMaxInstanceData.length), this.barTriangleData = new Float32Array(J * Y), this.barTriangleBuffer = this.renderer.createFloatBuffer(this.barTriangleData.length), this.gridData = new Float32Array(Z * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
 			color: t.gridStyle?.color ?? this.resolvedTheme.gridColor,
 			lineWidth: t.gridStyle?.lineWidth ?? 1
-		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new N(this.layout, this.normalizedAxes, {
+		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible || this.normalizedAxes.y2.visible) && (this.axisOverlay = new P(this.layout, this.normalizedAxes, {
 			color: this.resolvedTheme.axisColor,
 			font: this.resolvedTheme.axisFont
 		})), this.canvas.addEventListener("pointermove", this.handlePointerMove), this.canvas.addEventListener("pointerleave", this.handlePointerLeave), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.layout.plot));
@@ -1611,36 +1811,42 @@ var ce = class {
 	get yAxisElement() {
 		return this.layout.yAxis;
 	}
+	get y2AxisElement() {
+		return this.layout.y2Axis;
+	}
 	get theme() {
 		return this.resolvedTheme;
 	}
-	getCamera() {
-		return this.camera;
+	getWebGLContext() {
+		return this.renderer.getWebGLContext();
 	}
-	dataToPlot(e, t) {
-		let [n, r] = this.camera.toClip(e, t);
-		return this.camera.toScreen(n, r, this.canvas.clientWidth, this.canvas.clientHeight);
+	getCamera(e = "left") {
+		return e === "right" ? this.rightCamera : this.camera;
 	}
-	clientToData(e, t) {
-		let n = this.canvas.getBoundingClientRect();
-		if (n.width <= 0 || n.height <= 0) return null;
-		let r = e - n.left, i = t - n.top;
-		if (r < 0 || i < 0 || r > n.width || i > n.height) return null;
-		let a = this.camera.viewport;
-		return [a.xMin + r / n.width * (a.xMax - a.xMin), a.yMax - i / n.height * (a.yMax - a.yMin)];
+	dataToPlot(e, t, n = "left") {
+		let r = this.getCamera(n), [i, a] = r.toClip(e, t);
+		return r.toScreen(i, a, this.canvas.clientWidth, this.canvas.clientHeight);
+	}
+	clientToData(e, t, n = "left") {
+		let r = this.canvas.getBoundingClientRect();
+		if (r.width <= 0 || r.height <= 0) return null;
+		let i = e - r.left, a = t - r.top;
+		if (i < 0 || a < 0 || i > r.width || a > r.height) return null;
+		let o = this.getCamera(n).viewport;
+		return [o.xMin + i / r.width * (o.xMax - o.xMin), o.yMax - a / r.height * (o.yMax - o.yMin)];
 	}
-	getViewport() {
-		return this.camera.viewport;
+	getViewport(e = "left") {
+		return this.getCamera(e).viewport;
 	}
 	pan(e) {
-		this.camera.pan(e), this.refreshHover();
+		this.camera.pan(e), this.syncRightCameraX(), this.refreshHover();
 	}
 	zoom(e) {
-		this.camera.zoom(e), this.refreshHover();
+		this.camera.zoom(e), this.syncRightCameraX(), this.refreshHover();
 	}
 	addSeries(e, t) {
-		if (e.mode === "ohlc" && !e.dataset) throw TypeError("OHLC series require an OhlcDataset.");
-		let n = e.dataset ?? new l(e.capacity, { overflow: e.overflow }), r = this.resolvedTheme.seriesColors, i = r[this.series.length % r.length] ?? this.resolvedTheme.seriesColors[0], a = t?.color ?? i, s = new o(n, e, {
+		if ((e.mode === "ohlc" || e.mode === "candlestick") && !e.dataset) throw TypeError("OHLC and candlestick series require an OhlcDataset.");
+		let n = e.dataset ?? new g(e.capacity, { overflow: e.overflow }), r = this.resolvedTheme.seriesColors, i = r[this.series.length % r.length] ?? this.resolvedTheme.seriesColors[0], a = t?.color ?? i, o = new p(n, e, {
 			color: a,
 			lineWidth: t?.lineWidth ?? 1,
 			pointSize: t?.pointSize ?? 4,
@@ -1652,9 +1858,17 @@ var ce = class {
 				a[2],
 				a[3] * .25
 			],
-			tickWidth: t?.tickWidth ?? t?.barWidth ?? .8
+			tickWidth: t?.tickWidth ?? t?.barWidth ?? .8,
+			upColor: t?.upColor ?? a,
+			downColor: t?.downColor ?? t?.fillColor ?? [
+				a[0],
+				a[1],
+				a[2],
+				a[3] * .45
+			],
+			wickColor: t?.wickColor ?? a
 		});
-		return this.series.push(s), this.emitSeriesChange(), s;
+		return this.series.push(o), this.emitSeriesChange(), o;
 	}
 	addLine(e, t) {
 		return this.addSeries({
@@ -1686,6 +1900,12 @@ var ce = class {
 			mode: "ohlc"
 		}, t);
 	}
+	addCandlestick(e, t) {
+		return this.addSeries({
+			...e,
+			mode: "candlestick"
+		}, t);
+	}
 	removeSeries(e) {
 		let t = this.series.indexOf(e);
 		return t === -1 ? !1 : (this.series.splice(t, 1), this.emitSeriesChange(), !0);
@@ -1701,11 +1921,15 @@ var ce = class {
 			name: e.config.name,
 			mode: e.config.mode,
 			visible: e.visible,
-			color: e.style.color
+			color: e.style.color,
+			yAxis: e.config.yAxis ?? "left"
 		}));
 	}
 	setViewport(e) {
-		this.camera.setViewport(e), this.refreshHover();
+		this.camera.setViewport(e), this.rightCamera.setViewport(e), this.refreshHover();
+	}
+	setYViewport(e, t) {
+		this.getCamera(e).setViewport(t), this.refreshHover();
 	}
 	resize(e = globalThis.devicePixelRatio) {
 		let t = this.applyCanvasSize(e);
@@ -1733,11 +1957,15 @@ var ce = class {
 			let e = t;
 			return this.themeSubscribers.add(e), () => this.themeSubscribers.delete(e);
 		}
+		if (e === "render") {
+			let e = t;
+			return this.renderSubscribers.add(e), () => this.renderSubscribers.delete(e);
+		}
 		let n = t;
 		return this.seriesSubscribers.add(n), () => this.seriesSubscribers.delete(n);
 	}
 	setTheme(e) {
-		this.resolvedTheme = F(e, this.layout.root), this.applyTheme(), this.emitThemeChange(), this.refreshHover();
+		this.resolvedTheme = I(e, this.layout.root), this.applyTheme(), this.emitThemeChange(), this.refreshHover();
 	}
 	setGridVisible(e) {
 		this._gridVisible = e;
@@ -1746,7 +1974,7 @@ var ce = class {
 		return this._gridVisible;
 	}
 	setAxes(e) {
-		this.normalizedAxes = $(e), this.layout.update(this.normalizedAxes), this.axisOverlay?.dispose(), this.axisOverlay = null, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new N(this.layout, this.normalizedAxes, {
+		this.normalizedAxes = $(e), this.layout.update(this.normalizedAxes), this.axisOverlay?.dispose(), this.axisOverlay = null, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible || this.normalizedAxes.y2.visible) && (this.axisOverlay = new P(this.layout, this.normalizedAxes, {
 			color: this.resolvedTheme.axisColor,
 			font: this.resolvedTheme.axisFont
 		})), this.resize(), this.refreshHover();
@@ -1756,17 +1984,21 @@ var ce = class {
 		if (r.width <= 0 || r.height <= 0) return null;
 		let i = e - r.left, a = t - r.top;
 		if (i < 0 || a < 0 || i > r.width || a > r.height) return null;
-		let o = this.camera.viewport, s = o.xMin + i / r.width * (o.xMax - o.xMin), c = o.yMax - a / r.height * (o.yMax - o.yMin), l = n.mode ?? this.options.hover?.mode ?? "nearest-x", u = n.maxDistancePx ?? this.options.hover?.maxDistancePx ?? Infinity, d = l === "nearest-point" ? this.findNearestPointAnchor(s, c, o, r.width, r.height, u) : this.findNearestXAnchor(s, o, r.width, u);
-		return d === null ? null : {
+		let o = this.camera.viewport, s = o.xMin + i / r.width * (o.xMax - o.xMin), c = o.yMax - a / r.height * (o.yMax - o.yMin), l = n.mode ?? this.options.hover?.mode ?? "nearest-x", u = n.group ?? this.options.hover?.group ?? "x", d = n.maxDistancePx ?? this.options.hover?.maxDistancePx ?? Infinity, f = l === "nearest-point" ? this.findNearestPointCandidate(s, a, r.width, r.height, d) : this.findNearestXCandidate(s, r.width, d);
+		if (!f) return null;
+		let p = f.sample.x;
+		return {
 			clientX: e,
 			clientY: t,
 			plotX: i,
 			plotY: a,
 			dataX: s,
 			dataY: c,
-			anchorX: d,
+			anchorX: p,
 			mode: l,
-			items: this.collectPickItems(d, e, t, o, r)
+			group: u,
+			maxDistancePx: d,
+			items: u === "none" ? [this.createPickItem(f.sample, f.series, f.seriesIndex, e, t, r)] : this.collectPickItems(p, e, t, r)
 		};
 	}
 	async screenshot(e = {}) {
@@ -1790,7 +2022,7 @@ var ce = class {
 	}
 	render() {
 		let e = performance.now();
-		this.lastFrameAt > 0 && (this.stats.fps = 1e3 / (e - this.lastFrameAt)), this.lastFrameAt = e, this.stats.pointsRendered = 0, this.stats.drawCalls = 0, this.stats.uploadBytes = 0, this.stats.renderMode = "none", this.options.viewportPolicy?.beforeRender?.(this.camera);
+		this.lastFrameAt > 0 && (this.stats.fps = 1e3 / (e - this.lastFrameAt)), this.lastFrameAt = e, this.stats.pointsRendered = 0, this.stats.drawCalls = 0, this.stats.uploadBytes = 0, this.stats.renderMode = "none", this.options.viewportPolicy?.beforeRender?.(this.camera), this.syncRightCameraX();
 		let [t, n, r, i] = this.resolvedTheme.backgroundColor;
 		this.renderer.viewport(0, 0, this.canvas.width, this.canvas.height), this.renderer.clear(t, n, r, i);
 		let a = this.camera.viewport;
@@ -1798,8 +2030,8 @@ var ce = class {
 			let e = this.writeGridVertices(a);
 			e > 0 && (this.uploadGridData(e), this.renderer.drawClipLines(this.gridBuffer, e, this.gridStyle), this.stats.drawCalls++);
 		}
-		for (let e of this.series) e.visible && (e.rebuildPyramid(), this.drawSeries(e, a));
-		this.axisOverlay?.update(this.camera, this.axis), this.stats.frameMs = performance.now() - e, this.refreshHover();
+		for (let e of this.series) e.visible && (e.rebuildPyramid(), this.drawSeries(e));
+		this.axisOverlay?.update(this.camera, this.axis, this.rightCamera, this.rightAxis), this.emitRender(), this.stats.frameMs = performance.now() - e, this.refreshHover();
 	}
 	dispose() {
 		this.stop(), this.resizeObserver?.disconnect(), this.canvas.removeEventListener("pointermove", this.handlePointerMove), this.canvas.removeEventListener("pointerleave", this.handlePointerLeave);
@@ -1819,96 +2051,141 @@ var ce = class {
 		let t = Number.isFinite(e) ? Math.max(1, e) : 1, n = Math.max(1, Math.floor(this.canvas.clientWidth * t)), r = Math.max(1, Math.floor(this.canvas.clientHeight * t));
 		return this.canvas.width === n && this.canvas.height === r ? !1 : (this.canvas.width = n, this.canvas.height = r, !0);
 	}
-	drawSeries(e, t) {
+	cameraForSeries(e) {
+		return e.config.yAxis === "right" ? this.rightCamera : this.camera;
+	}
+	syncRightCameraX() {
+		this.rightCamera.setViewport({
+			xMin: this.camera.xMin,
+			xMax: this.camera.xMax
+		});
+	}
+	drawSeries(e) {
+		let t = this.cameraForSeries(e), n = t.viewport;
 		switch (e.config.mode) {
 			case "area":
-				this.drawAreaSeries(e, t);
+				this.drawAreaSeries(e, n, t);
 				return;
 			case "bar":
-				this.drawBarSeries(e, t);
+				this.drawBarSeries(e, n, t);
 				return;
 			case "ohlc":
-				this.drawOhlcSeries(e, t);
+				this.drawOhlcSeries(e, n, t);
+				return;
+			case "candlestick":
+				this.drawCandlestickSeries(e, n, t);
 				return;
 			case "scatter":
-				this.drawScatterSeries(e, t);
+				this.drawScatterSeries(e, n, t);
 				return;
-			default: this.drawLineSeries(e, t);
+			default: this.drawLineSeries(e, n, t);
 		}
 	}
-	drawLineSeries(e, t) {
-		let n = e.visibleSampleCount(t), r = e.hasLOD && n > G - 2;
-		if (r && this.renderer.supportsInstancedSegments) {
-			let n = e.copyMinMaxInstanced(t, this.minMaxInstanceData, this.maxMinMaxSegments(), this.currentXOrigin);
-			if (n <= 0) return;
-			this.uploadMinMaxInstanceData(n), this.renderer.drawMinMaxSegmentsInstanced(this.minMaxInstanceBuffer, n, e.style, this.camera), this.recordDraw("minmax", n * 2);
+	drawLineSeries(e, t, n) {
+		let r = e.visibleSampleCount(t), i = e.hasLOD && r > W - 2;
+		if (i && this.renderer.supportsInstancedSegments) {
+			let r = e.copyMinMaxInstanced(t, this.minMaxInstanceData, this.maxMinMaxSegments(), this.currentXOrigin);
+			if (r <= 0) return;
+			this.uploadMinMaxInstanceData(r), this.renderer.drawMinMaxSegmentsInstanced(this.minMaxInstanceBuffer, r, e.style, n), this.recordDraw("minmax", r * 2);
 			return;
 		}
-		if (r) {
-			let n = e.copyMinMaxVisible(t, this.rawLineData, this.maxMinMaxSegments(), this.currentXOrigin);
-			if (n < 2) return;
-			this.uploadRawLineData(n), this.renderer.drawMinMaxSegments(this.rawLineBuffer, n, e.style, this.camera), this.recordDraw("minmax", n);
+		if (i) {
+			let r = e.copyMinMaxVisible(t, this.rawLineData, this.maxMinMaxSegments(), this.currentXOrigin);
+			if (r < 2) return;
+			this.uploadRawLineData(r), this.renderer.drawMinMaxSegments(this.rawLineBuffer, r, e.style, n), this.recordDraw("minmax", r);
 			return;
 		}
-		let i = e.copyRawVisibleClipSpace(t, this.rawLineData, G);
-		i < 2 || (this.uploadRawLineData(i), this.renderer.drawClipLineStrip(this.rawLineBuffer, i, e.style), this.recordDraw("raw", i));
-	}
-	drawAreaSeries(e, t) {
-		let n = e.visibleIndexRange(t, 1);
-		if (n.end - n.start < 2) return;
-		let r = e.style.baseline ?? 0;
-		for (let t = n.start; t < n.end;) {
-			let i = e.copyAreaRange(t, n.end, this.rawLineData, K, r, this.currentXOrigin);
-			if (i < 4) break;
-			this.uploadRawLineData(i), this.renderer.drawAreaStrip(this.rawLineBuffer, i, e.style, this.camera), this.recordDraw("area", i), t += Math.max(1, (i >> 1) - 1);
-		}
-		for (let t = n.start; t < n.end;) {
-			let r = e.copyRawRange(t, n.end, this.rawLineData, K, this.currentXOrigin);
-			if (r < 2) break;
-			this.uploadRawLineData(r), this.renderer.drawLineStrip(this.rawLineBuffer, r, e.style, this.camera), this.recordDraw("area", r), t += Math.max(1, r - 1);
-		}
-	}
-	drawOhlcSeries(e, t) {
-		let n = e.visibleIndexRange(t), r = Math.floor(this.rawLineData.length / se);
-		for (let t = n.start; t < n.end;) {
-			let i = e.copyOhlcRange(t, n.end, this.rawLineData, r, e.style.tickWidth ?? e.style.barWidth ?? .8, this.currentXOrigin);
-			if (i <= 0) break;
-			let a = i * 6;
-			this.uploadRawLineData(a), this.renderer.drawLines(this.rawLineBuffer, a, e.style, this.camera), this.recordDraw("raw", a), t += i;
-		}
-	}
-	drawScatterSeries(e, t) {
-		let n = e.visibleIndexRange(t);
-		for (let t = n.start; t < n.end;) {
-			let r = e.copyRawRange(t, n.end, this.rawLineData, G, this.currentXOrigin);
-			if (r <= 0) break;
-			this.uploadRawLineData(r), this.renderer.drawPoints(this.rawLineBuffer, r, e.style, this.camera, this.canvas.width, this.canvas.height), this.recordDraw("points", r), t += r;
-		}
-	}
-	drawBarSeries(e, t) {
-		let n = e.visibleSampleCount(t), r = this.maxRawBarInstances();
-		if (e.hasLOD && n > r) {
-			let n = e.copyMinMaxInstanced(t, this.minMaxInstanceData, this.maxBarTriangleBars(), this.currentXOrigin);
-			if (n <= 0) return;
-			this.includeBaselineInBarRanges(n, e.style.baseline ?? 0);
-			let r = this.writeBarBucketTriangles(n, t);
-			this.drawBarTriangles(r, e.style);
+		let a = e.copyRawVisibleClipSpace(t, this.rawLineData, W);
+		a < 2 || (this.uploadRawLineData(a), this.renderer.drawClipLineStrip(this.rawLineBuffer, a, e.style), this.recordDraw("raw", a));
+	}
+	drawAreaSeries(e, t, n) {
+		let r = e.visibleIndexRange(t, 1);
+		if (r.end - r.start < 2) return;
+		let i = e.style.baseline ?? 0;
+		if (r.end - r.start > G) {
+			let r = e.copyAreaVisible(t, this.rawLineData, G, i, this.currentXOrigin);
+			r >= 4 && (this.uploadRawLineData(r), this.renderer.drawAreaStrip(this.rawLineBuffer, r, e.style, n), this.recordDraw("area", r));
+			let a = e.copyRawVisible(t, this.rawLineData, G, this.currentXOrigin);
+			a >= 2 && (this.uploadRawLineData(a), this.renderer.drawLineStrip(this.rawLineBuffer, a, e.style, n), this.recordDraw("area", a));
 			return;
 		}
-		let i = e.visibleIndexRange(t, 1), a = e.copyRawRange(i.start, i.end, this.rawLineData, r, this.currentXOrigin);
-		if (a <= 0) return;
+		for (let t = r.start; t < r.end;) {
+			let a = e.copyAreaRange(t, r.end, this.rawLineData, G, i, this.currentXOrigin);
+			if (a < 4) break;
+			this.uploadRawLineData(a), this.renderer.drawAreaStrip(this.rawLineBuffer, a, e.style, n), this.recordDraw("area", a), t += Math.max(1, (a >> 1) - 1);
+		}
+		for (let t = r.start; t < r.end;) {
+			let i = e.copyRawRange(t, r.end, this.rawLineData, G, this.currentXOrigin);
+			if (i < 2) break;
+			this.uploadRawLineData(i), this.renderer.drawLineStrip(this.rawLineBuffer, i, e.style, n), this.recordDraw("area", i), t += Math.max(1, i - 1);
+		}
+	}
+	drawOhlcSeries(e, t, n) {
+		let r = e.visibleIndexRange(t), i = Math.floor(this.rawLineData.length / he);
+		for (let t = r.start; t < r.end;) {
+			let a = e.copyOhlcRange(t, r.end, this.rawLineData, i, e.style.tickWidth ?? e.style.barWidth ?? .8, this.currentXOrigin);
+			if (a <= 0) break;
+			let o = a * 6;
+			this.uploadRawLineData(o), this.renderer.drawLines(this.rawLineBuffer, o, e.style, n), this.recordDraw("raw", o), t += a;
+		}
+	}
+	drawCandlestickSeries(e, t, n) {
+		let r = e.visibleIndexRange(t, 1), i = Math.min(Math.floor(this.rawLineData.length / X), this.maxBarTriangleBars()), a = {
+			...e.style,
+			color: e.style.wickColor ?? e.style.color
+		}, o = {
+			...e.style,
+			color: e.style.upColor ?? e.style.color
+		}, s = {
+			...e.style,
+			color: e.style.downColor ?? e.style.fillColor ?? e.style.color
+		};
+		for (let t = r.start; t < r.end;) {
+			let c = e.copyOhlcTuplesRange(t, r.end, this.rawLineData, i, this.currentXOrigin);
+			if (c <= 0) break;
+			let l = this.writeCandlestickWicks(c);
+			l > 0 && (this.uploadBarTriangleData(l), this.renderer.drawLines(this.barTriangleBuffer, l, a, n), this.recordDraw("raw", l));
+			let u = e.style.barWidth ?? e.style.tickWidth ?? .8;
+			this.drawCandlestickBodies(c, u, "up", o, n), this.drawCandlestickBodies(c, u, "down", s, n), t += c;
+		}
+	}
+	drawScatterSeries(e, t, n) {
+		let r = e.style.pointSize ?? ge, i = e.visibleSampleCount(t);
+		if (e.config.downsample === "none" && i <= _e) {
+			let i = e.visibleIndexRange(t);
+			for (let a = i.start; a < i.end; a += W) {
+				let o = e.copyScatterRange(a, Math.min(i.end, a + W), t, this.rawLineData, W, this.currentXOrigin, this.canvas.height, r);
+				o <= 0 || (this.uploadRawLineData(o), this.renderer.drawPoints(this.rawLineBuffer, o, e.style, n, this.canvas.width, this.canvas.height), this.recordDraw("points", o));
+			}
+			return;
+		}
+		let a = e.copyScatterVisible(t, this.rawLineData, W, this.canvas.width, this.canvas.height, r, this.currentXOrigin);
+		a <= 0 || (this.uploadRawLineData(a), this.renderer.drawPoints(this.rawLineBuffer, a, e.style, n, this.canvas.width, this.canvas.height), this.recordDraw("points", a));
+	}
+	drawBarSeries(e, t, n) {
+		let r = e.visibleSampleCount(t), i = this.maxRawBarInstances();
+		if (e.hasLOD && r > i) {
+			let r = e.copyMinMaxInstanced(t, this.minMaxInstanceData, this.maxBarTriangleBars(), this.currentXOrigin);
+			if (r <= 0) return;
+			this.includeBaselineInBarRanges(r, e.style.baseline ?? 0);
+			let i = this.writeBarBucketTriangles(r, t);
+			this.drawBarTriangles(i, e.style, n);
+			return;
+		}
+		let a = e.visibleIndexRange(t, 1), o = e.copyRawRange(a.start, a.end, this.rawLineData, i, this.currentXOrigin);
+		if (o <= 0) return;
 		if (this.renderer.supportsInstancedBars) {
-			this.uploadRawLineData(a), this.renderer.drawBarsInstanced(this.rawLineBuffer, a, e.style, this.camera), this.recordDraw("bars", a);
+			this.uploadRawLineData(o), this.renderer.drawBarsInstanced(this.rawLineBuffer, o, e.style, n), this.recordDraw("bars", o);
 			return;
 		}
-		let o = this.writeBarTriangles(a, e.style.baseline ?? 0, e.style.barWidth ?? .8);
-		this.drawBarTriangles(o, e.style);
+		let s = this.writeBarTriangles(o, e.style.baseline ?? 0, e.style.barWidth ?? .8);
+		this.drawBarTriangles(s, e.style, n);
 	}
 	uploadRawLineData(e) {
 		this.uploadFloatData(this.rawLineBuffer, this.rawLineData, e * 2);
 	}
 	uploadMinMaxInstanceData(e) {
-		this.uploadFloatData(this.minMaxInstanceBuffer, this.minMaxInstanceData, e * J);
+		this.uploadFloatData(this.minMaxInstanceBuffer, this.minMaxInstanceData, e * q);
 	}
 	uploadBarTriangleData(e) {
 		this.uploadFloatData(this.barTriangleBuffer, this.barTriangleData, e * 2);
@@ -1922,7 +2199,7 @@ var ce = class {
 	}
 	includeBaselineInBarRanges(e, t) {
 		for (let n = 0; n < e; n++) {
-			let e = n * J, r = this.minMaxInstanceData[e + 1], i = this.minMaxInstanceData[e + 2];
+			let e = n * q, r = this.minMaxInstanceData[e + 1], i = this.minMaxInstanceData[e + 2];
 			this.minMaxInstanceData[e + 1] = Math.min(t, r), this.minMaxInstanceData[e + 2] = Math.max(t, i);
 		}
 	}
@@ -1955,59 +2232,86 @@ var ce = class {
 		}
 		return [Math.max(i, l), Math.min(a, u)];
 	}
+	writeCandlestickWicks(e) {
+		for (let t = 0; t < e; t++) {
+			let e = t * X, n = t * 4, r = this.rawLineData[e], i = this.rawLineData[e + 2], a = this.rawLineData[e + 3];
+			this.barTriangleData[n] = r, this.barTriangleData[n + 1] = a, this.barTriangleData[n + 2] = r, this.barTriangleData[n + 3] = i;
+		}
+		return e * 2;
+	}
+	drawCandlestickBodies(e, t, n, r, i) {
+		let a = t * .5, o = 0;
+		for (let t = 0; t < e && o < this.maxBarTriangleBars(); t++) {
+			let e = t * X, r = this.rawLineData[e], i = this.rawLineData[e + 1], s = this.rawLineData[e + 4];
+			n === "up" == s >= i && (this.writeBarTriangle(o, r - a, r + a, Math.min(i, s), Math.max(i, s)), o++);
+		}
+		this.drawBarTriangles(o * 6, r, i);
+	}
 	writeBarTriangle(e, t, n, r, i) {
-		let a = e * X;
+		let a = e * Y;
 		this.barTriangleData[a] = t, this.barTriangleData[a + 1] = r, this.barTriangleData[a + 2] = n, this.barTriangleData[a + 3] = r, this.barTriangleData[a + 4] = t, this.barTriangleData[a + 5] = i, this.barTriangleData[a + 6] = t, this.barTriangleData[a + 7] = i, this.barTriangleData[a + 8] = n, this.barTriangleData[a + 9] = r, this.barTriangleData[a + 10] = n, this.barTriangleData[a + 11] = i;
 	}
-	drawBarTriangles(e, t) {
-		e <= 0 || (this.uploadBarTriangleData(e), this.renderer.drawBarTriangles(this.barTriangleBuffer, e, t, this.camera), this.recordDraw("bars", e));
+	drawBarTriangles(e, t, n, r = "bars") {
+		e <= 0 || (this.uploadBarTriangleData(e), this.renderer.drawBarTriangles(this.barTriangleBuffer, e, t, n), this.recordDraw(r, e));
 	}
 	recordDraw(e, t, n = 1) {
 		this.recordRenderMode(e), this.stats.pointsRendered += t, this.stats.drawCalls += n;
 	}
-	findNearestXAnchor(e, t, n, r) {
-		let i = null, a = Infinity, o = n / (t.xMax - t.xMin);
-		for (let n of this.series) {
-			if (!n.visible) continue;
-			let r = n.nearestSampleByX(e, t);
-			if (!r) continue;
-			let s = Math.abs(r.x - e) * o;
-			s < a && (i = r, a = s);
-		}
-		return !i || a > r ? null : i.x;
-	}
-	findNearestPointAnchor(e, t, n, r, i, a) {
-		let o = null;
-		for (let a of this.series) {
+	findNearestXCandidate(e, t, n) {
+		let r = null, i = Infinity;
+		for (let n = 0; n < this.series.length; n++) {
+			let a = this.series[n];
 			if (!a.visible) continue;
-			let s = a.nearestSampleByPoint(e, t, n, r, i);
-			s && (!o || (s.distancePx ?? Infinity) < (o.distancePx ?? Infinity)) && (o = s);
+			let o = this.cameraForSeries(a).viewport, s = t / (o.xMax - o.xMin), c = a.nearestSampleByX(e, o);
+			if (!c) continue;
+			let l = Math.abs(c.x - e) * s;
+			l < i && (r = {
+				sample: c,
+				series: a,
+				seriesIndex: n
+			}, i = l);
 		}
-		return !o || (o.distancePx ?? Infinity) > a ? null : o.x;
+		return r && i <= n ? r : null;
 	}
-	collectPickItems(e, t, n, r, i) {
-		let a = [];
+	findNearestPointCandidate(e, t, n, r, i) {
+		let a = null;
 		for (let o = 0; o < this.series.length; o++) {
 			let s = this.series[o];
 			if (!s.visible) continue;
-			let c = s.nearestSampleByX(e, r);
-			if (!c) continue;
-			let [l, u] = this.camera.toClip(c.x, c.y), [d, f] = this.camera.toScreen(l, u, i.width, i.height), p = i.left + d, m = i.top + f, h = p - t, g = m - n;
-			a.push({
-				...c,
-				distancePx: Math.hypot(h, g),
+			let c = this.cameraForSeries(s).viewport, l = c.yMax - t / r * (c.yMax - c.yMin), u = s.nearestSampleByPoint(e, l, c, n, r, i);
+			u && (!a || (u.distancePx ?? Infinity) < (a.sample.distancePx ?? Infinity)) && (a = {
+				sample: u,
 				series: s,
-				seriesIndex: o,
-				id: s.config.id,
-				name: s.config.name,
-				mode: s.config.mode,
-				plotX: d,
-				plotY: f,
-				clientX: p,
-				clientY: m
+				seriesIndex: o
 			});
 		}
-		return a;
+		return a && (a.sample.distancePx ?? Infinity) <= i ? a : null;
+	}
+	collectPickItems(e, t, n, r) {
+		let i = [];
+		for (let a = 0; a < this.series.length; a++) {
+			let o = this.series[a];
+			if (!o.visible) continue;
+			let s = o.nearestSampleByX(e, this.cameraForSeries(o).viewport);
+			s && i.push(this.createPickItem(s, o, a, t, n, r));
+		}
+		return i;
+	}
+	createPickItem(e, t, n, r, i, a) {
+		let o = this.cameraForSeries(t), [s, c] = o.toClip(e.x, e.y), [l, u] = o.toScreen(s, c, a.width, a.height), d = a.left + l, f = a.top + u, p = d - r, m = f - i;
+		return {
+			...e,
+			distancePx: Math.hypot(p, m),
+			series: t,
+			seriesIndex: n,
+			id: t.config.id,
+			name: t.config.name,
+			mode: t.config.mode,
+			plotX: l,
+			plotY: u,
+			clientX: d,
+			clientY: f
+		};
 	}
 	refreshHover() {
 		this.pointerInPlot && this.emitHover(this.pick(this.lastPointerClientX, this.lastPointerClientY));
@@ -2023,6 +2327,9 @@ var ce = class {
 	emitThemeChange() {
 		for (let e of this.themeSubscribers) e();
 	}
+	emitRender() {
+		for (let e of this.renderSubscribers) e(this);
+	}
 	drawDomTextForScreenshot(e, t, n) {
 		let r = this.layout.root.querySelectorAll("div");
 		for (let i of r) {
@@ -2035,13 +2342,13 @@ var ce = class {
 		}
 	}
 	maxMinMaxSegments() {
-		return Math.min(this.canvas.width, q);
+		return Math.min(this.canvas.width, K);
 	}
 	maxBarTriangleBars() {
-		return Math.min(Y, G);
+		return Math.min(J, W);
 	}
 	maxRawBarInstances() {
-		return this.renderer.supportsInstancedBars ? G : this.maxBarTriangleBars();
+		return this.renderer.supportsInstancedBars ? W : this.maxBarTriangleBars();
 	}
 	writeGridVertices(e) {
 		let t = Math.max(1, this.canvas.clientWidth), n = Math.max(1, this.canvas.clientHeight);
@@ -2066,7 +2373,7 @@ var ce = class {
 	recordRenderMode(e) {
 		this.stats.renderMode === "none" ? this.stats.renderMode = e : this.stats.renderMode !== e && (this.stats.renderMode = "mixed");
 	}
-}, le = class {
+}, ye = class {
 	xData;
 	yData;
 	constructor(e, t) {
@@ -2088,15 +2395,15 @@ var ce = class {
 		return this.assertValidIndex(e), this.yData[e];
 	}
 	lowerBoundX(e) {
-		return s(this.length, (e) => this.xData[e], e);
+		return m(this.length, (e) => this.xData[e], e);
 	}
 	upperBoundX(e) {
-		return c(this.length, (e) => this.xData[e], e);
+		return h(this.length, (e) => this.xData[e], e);
 	}
 	assertValidIndex(e) {
 		if (!Number.isInteger(e) || e < 0 || e >= this.length) throw RangeError(`StaticDataset index out of range: ${e}`);
 	}
-}, ue = class {
+}, be = class {
 	length;
 	xs;
 	opens;
@@ -2131,15 +2438,15 @@ var ce = class {
 		return this.assertValidIndex(e), this.closes[e];
 	}
 	lowerBoundX(e) {
-		return s(this.length, (e) => this.xs[e], e);
+		return m(this.length, (e) => this.xs[e], e);
 	}
 	upperBoundX(e) {
-		return c(this.length, (e) => this.xs[e], e);
+		return h(this.length, (e) => this.xs[e], e);
 	}
 	assertValidIndex(e) {
 		if (!Number.isInteger(e) || e < 0 || e >= this.length) throw RangeError(`StaticOhlcDataset index out of range: ${e}`);
 	}
-}, de = class {
+}, xe = class {
 	capacity;
 	overflow;
 	xData;
@@ -2204,10 +2511,10 @@ var ce = class {
 		return this.assertValidIndex(e), this.closeData[this.logicalToPhysical(e)];
 	}
 	lowerBoundX(e) {
-		return s(this._length, (e) => this.getX(e), e);
+		return m(this._length, (e) => this.getX(e), e);
 	}
 	upperBoundX(e) {
-		return c(this._length, (e) => this.getX(e), e);
+		return h(this._length, (e) => this.getX(e), e);
 	}
 	logicalToPhysical(e) {
 		return (this._head - this._length + e + this.capacity) % this.capacity;
@@ -2217,6 +2524,6 @@ var ce = class {
 	}
 };
 //#endregion
-export { M as AxisController, j as Camera2D, ce as Chart, P as DEFAULT_CHART_THEME, n as MinMaxPyramid, de as OhlcRingBuffer, l as RingBuffer, o as SeriesStore, le as StaticDataset, ue as StaticOhlcDataset };
+export { N as AxisController, M as Camera2D, ve as Chart, F as DEFAULT_CHART_THEME, n as MinMaxPyramid, xe as OhlcRingBuffer, g as RingBuffer, p as SeriesStore, ye as StaticDataset, be as StaticOhlcDataset };
 
 //# sourceMappingURL=index.js.map