hyperprop-charting-library 0.1.10 → 0.1.12

package/dist/hyperprop-charting-library.cjs

@@ -118,6 +118,9 @@ var DEFAULT_OPTIONS = {
   priceDecimals: 2,
   initialViewport: "latest",
   initialVisibleBars: 60,
+  minVisibleBars: 5,
+  maxVisibleBars: 2e4,
+  maxPanBars: 1e6,
   rightEdgePaddingBars: 2,
   preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
@@ -146,6 +149,10 @@ var DEFAULT_OPTIONS = {
     labelBorderRadius: 3
   }
 };
+var BRAND_LOGO_VIEWBOX_WIDTH = 190;
+var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
+var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
+var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -198,6 +205,8 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
+  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -218,7 +227,9 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
-  const maxPanBars = 1e6;
+  const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
+  const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
+  const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
   const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
@@ -260,8 +271,8 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, count + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
     xSpan = clamp(xSpan, minSpan, maxSpan);
     xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
   };
@@ -272,8 +283,9 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
-    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minVisibleBars, count + maxPanBars * 2));
+    const requestedVisibleBars = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
+    xSpan = requestedVisibleBars;
     if (mergedOptions.initialViewport === "center") {
       xCenter = count / 2;
     } else {
@@ -1055,6 +1067,17 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    const brandLogoWidth = 34;
+    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
+    const brandLogoX = chartLeft + 16;
+    const brandLogoY = chartBottom - brandLogoHeight - 10;
+    ctx.save();
+    ctx.translate(brandLogoX, brandLogoY);
+    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill(brandLogoPathA);
+    ctx.fill(brandLogoPathB);
+    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1115,8 +1138,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const anchorRatio = clamp((anchorX - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const anchorIndex = drawState.xStart + anchorRatio * xSpan;
@@ -1130,8 +1153,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const rightEdgeIndex = data.length + rightEdgePaddingBars;
     const nextStart = rightEdgeIndex - nextSpan;
@@ -1180,6 +1203,64 @@ function createChart(element, options = {}) {
     }
     draw();
   };
+  const resetYViewport = () => {
+    yMinOverride = null;
+    yMaxOverride = null;
+    autoYMin = null;
+    autoYMax = null;
+  };
+  const zoomInX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(1 / Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomOutX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomInY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(1 / Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const zoomOutY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const panX = (bars) => {
+    if (!Number.isFinite(bars) || bars === 0) {
+      return;
+    }
+    xCenter += bars;
+    clampXViewport();
+    draw();
+  };
+  const panY = (priceDelta) => {
+    if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
+      return;
+    }
+    const currentMin = yMinOverride ?? drawState.yMin;
+    const currentMax = yMaxOverride ?? drawState.yMax;
+    const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
+    yMinOverride = clamped.min;
+    yMaxOverride = clamped.max;
+    draw();
+  };
+  const fitContent = () => {
+    fitXViewport();
+    draw();
+  };
+  const resetViewport = () => {
+    fitXViewport();
+    resetYViewport();
+    draw();
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -1523,19 +1604,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "y-axis") {
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
-    fitXViewport();
-    yMinOverride = null;
-    yMaxOverride = null;
-    autoYMin = null;
-    autoYMax = null;
-    draw();
+    resetViewport();
   };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
@@ -1559,19 +1632,13 @@ function createChart(element, options = {}) {
     if (data.length === 0) {
       xCenter = 0;
       xSpan = 60;
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
     if (!hadData) {
       fitXViewport();
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
         clampXViewport();
@@ -1670,6 +1737,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/dist/hyperprop-charting-library.d.ts

@@ -7,6 +7,9 @@ interface ChartOptions {
     priceDecimals?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
+    minVisibleBars?: number;
+    maxVisibleBars?: number;
+    maxPanBars?: number;
     rightEdgePaddingBars?: number;
     preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
@@ -182,6 +185,14 @@ interface ChartInstance {
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
     onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
+    zoomInX: (factor?: number) => void;
+    zoomOutX: (factor?: number) => void;
+    zoomInY: (factor?: number) => void;
+    zoomOutY: (factor?: number) => void;
+    panX: (bars: number) => void;
+    panY: (priceDelta: number) => void;
+    resetViewport: () => void;
+    fitContent: () => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;

package/dist/hyperprop-charting-library.js

@@ -94,6 +94,9 @@ var DEFAULT_OPTIONS = {
   priceDecimals: 2,
   initialViewport: "latest",
   initialVisibleBars: 60,
+  minVisibleBars: 5,
+  maxVisibleBars: 2e4,
+  maxPanBars: 1e6,
   rightEdgePaddingBars: 2,
   preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
@@ -122,6 +125,10 @@ var DEFAULT_OPTIONS = {
     labelBorderRadius: 3
   }
 };
+var BRAND_LOGO_VIEWBOX_WIDTH = 190;
+var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
+var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
+var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -174,6 +181,8 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
+  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -194,7 +203,9 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
-  const maxPanBars = 1e6;
+  const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
+  const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
+  const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
   const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
@@ -236,8 +247,8 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, count + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
     xSpan = clamp(xSpan, minSpan, maxSpan);
     xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
   };
@@ -248,8 +259,9 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
-    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minVisibleBars, count + maxPanBars * 2));
+    const requestedVisibleBars = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
+    xSpan = requestedVisibleBars;
     if (mergedOptions.initialViewport === "center") {
       xCenter = count / 2;
     } else {
@@ -1031,6 +1043,17 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    const brandLogoWidth = 34;
+    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
+    const brandLogoX = chartLeft + 16;
+    const brandLogoY = chartBottom - brandLogoHeight - 10;
+    ctx.save();
+    ctx.translate(brandLogoX, brandLogoY);
+    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill(brandLogoPathA);
+    ctx.fill(brandLogoPathB);
+    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1091,8 +1114,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const anchorRatio = clamp((anchorX - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const anchorIndex = drawState.xStart + anchorRatio * xSpan;
@@ -1106,8 +1129,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const rightEdgeIndex = data.length + rightEdgePaddingBars;
     const nextStart = rightEdgeIndex - nextSpan;
@@ -1156,6 +1179,64 @@ function createChart(element, options = {}) {
     }
     draw();
   };
+  const resetYViewport = () => {
+    yMinOverride = null;
+    yMaxOverride = null;
+    autoYMin = null;
+    autoYMax = null;
+  };
+  const zoomInX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(1 / Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomOutX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomInY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(1 / Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const zoomOutY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const panX = (bars) => {
+    if (!Number.isFinite(bars) || bars === 0) {
+      return;
+    }
+    xCenter += bars;
+    clampXViewport();
+    draw();
+  };
+  const panY = (priceDelta) => {
+    if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
+      return;
+    }
+    const currentMin = yMinOverride ?? drawState.yMin;
+    const currentMax = yMaxOverride ?? drawState.yMax;
+    const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
+    yMinOverride = clamped.min;
+    yMaxOverride = clamped.max;
+    draw();
+  };
+  const fitContent = () => {
+    fitXViewport();
+    draw();
+  };
+  const resetViewport = () => {
+    fitXViewport();
+    resetYViewport();
+    draw();
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -1499,19 +1580,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "y-axis") {
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
-    fitXViewport();
-    yMinOverride = null;
-    yMaxOverride = null;
-    autoYMin = null;
-    autoYMax = null;
-    draw();
+    resetViewport();
   };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
@@ -1535,19 +1608,13 @@ function createChart(element, options = {}) {
     if (data.length === 0) {
       xCenter = 0;
       xSpan = 60;
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
     if (!hadData) {
       fitXViewport();
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
         clampXViewport();
@@ -1646,6 +1713,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/dist/index.cjs

@@ -118,6 +118,9 @@ var DEFAULT_OPTIONS = {
   priceDecimals: 2,
   initialViewport: "latest",
   initialVisibleBars: 60,
+  minVisibleBars: 5,
+  maxVisibleBars: 2e4,
+  maxPanBars: 1e6,
   rightEdgePaddingBars: 2,
   preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
@@ -146,6 +149,10 @@ var DEFAULT_OPTIONS = {
     labelBorderRadius: 3
   }
 };
+var BRAND_LOGO_VIEWBOX_WIDTH = 190;
+var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
+var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
+var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -198,6 +205,8 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
+  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -218,7 +227,9 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
-  const maxPanBars = 1e6;
+  const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
+  const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
+  const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
   const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
@@ -260,8 +271,8 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, count + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
     xSpan = clamp(xSpan, minSpan, maxSpan);
     xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
   };
@@ -272,8 +283,9 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
-    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minVisibleBars, count + maxPanBars * 2));
+    const requestedVisibleBars = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
+    xSpan = requestedVisibleBars;
     if (mergedOptions.initialViewport === "center") {
       xCenter = count / 2;
     } else {
@@ -1055,6 +1067,17 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    const brandLogoWidth = 34;
+    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
+    const brandLogoX = chartLeft + 16;
+    const brandLogoY = chartBottom - brandLogoHeight - 10;
+    ctx.save();
+    ctx.translate(brandLogoX, brandLogoY);
+    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill(brandLogoPathA);
+    ctx.fill(brandLogoPathB);
+    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1115,8 +1138,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const anchorRatio = clamp((anchorX - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const anchorIndex = drawState.xStart + anchorRatio * xSpan;
@@ -1130,8 +1153,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const rightEdgeIndex = data.length + rightEdgePaddingBars;
     const nextStart = rightEdgeIndex - nextSpan;
@@ -1180,6 +1203,64 @@ function createChart(element, options = {}) {
     }
     draw();
   };
+  const resetYViewport = () => {
+    yMinOverride = null;
+    yMaxOverride = null;
+    autoYMin = null;
+    autoYMax = null;
+  };
+  const zoomInX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(1 / Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomOutX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomInY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(1 / Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const zoomOutY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const panX = (bars) => {
+    if (!Number.isFinite(bars) || bars === 0) {
+      return;
+    }
+    xCenter += bars;
+    clampXViewport();
+    draw();
+  };
+  const panY = (priceDelta) => {
+    if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
+      return;
+    }
+    const currentMin = yMinOverride ?? drawState.yMin;
+    const currentMax = yMaxOverride ?? drawState.yMax;
+    const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
+    yMinOverride = clamped.min;
+    yMaxOverride = clamped.max;
+    draw();
+  };
+  const fitContent = () => {
+    fitXViewport();
+    draw();
+  };
+  const resetViewport = () => {
+    fitXViewport();
+    resetYViewport();
+    draw();
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -1523,19 +1604,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "y-axis") {
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
-    fitXViewport();
-    yMinOverride = null;
-    yMaxOverride = null;
-    autoYMin = null;
-    autoYMax = null;
-    draw();
+    resetViewport();
   };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
@@ -1559,19 +1632,13 @@ function createChart(element, options = {}) {
     if (data.length === 0) {
       xCenter = 0;
       xSpan = 60;
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
     if (!hadData) {
       fitXViewport();
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
         clampXViewport();
@@ -1670,6 +1737,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/dist/index.d.cts

@@ -7,6 +7,9 @@ interface ChartOptions {
     priceDecimals?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
+    minVisibleBars?: number;
+    maxVisibleBars?: number;
+    maxPanBars?: number;
     rightEdgePaddingBars?: number;
     preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
@@ -182,6 +185,14 @@ interface ChartInstance {
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
     onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
+    zoomInX: (factor?: number) => void;
+    zoomOutX: (factor?: number) => void;
+    zoomInY: (factor?: number) => void;
+    zoomOutY: (factor?: number) => void;
+    panX: (bars: number) => void;
+    panY: (priceDelta: number) => void;
+    resetViewport: () => void;
+    fitContent: () => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;

package/dist/index.d.ts

@@ -7,6 +7,9 @@ interface ChartOptions {
     priceDecimals?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
+    minVisibleBars?: number;
+    maxVisibleBars?: number;
+    maxPanBars?: number;
     rightEdgePaddingBars?: number;
     preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
@@ -182,6 +185,14 @@ interface ChartInstance {
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
     onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
+    zoomInX: (factor?: number) => void;
+    zoomOutX: (factor?: number) => void;
+    zoomInY: (factor?: number) => void;
+    zoomOutY: (factor?: number) => void;
+    panX: (bars: number) => void;
+    panY: (priceDelta: number) => void;
+    resetViewport: () => void;
+    fitContent: () => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;

package/dist/index.js

@@ -94,6 +94,9 @@ var DEFAULT_OPTIONS = {
   priceDecimals: 2,
   initialViewport: "latest",
   initialVisibleBars: 60,
+  minVisibleBars: 5,
+  maxVisibleBars: 2e4,
+  maxPanBars: 1e6,
   rightEdgePaddingBars: 2,
   preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
@@ -122,6 +125,10 @@ var DEFAULT_OPTIONS = {
     labelBorderRadius: 3
   }
 };
+var BRAND_LOGO_VIEWBOX_WIDTH = 190;
+var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
+var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
+var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -174,6 +181,8 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
+  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -194,7 +203,9 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
-  const maxPanBars = 1e6;
+  const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
+  const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
+  const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
   const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
@@ -236,8 +247,8 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, count + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
     xSpan = clamp(xSpan, minSpan, maxSpan);
     xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
   };
@@ -248,8 +259,9 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
-    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minVisibleBars, count + maxPanBars * 2));
+    const requestedVisibleBars = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
+    xSpan = requestedVisibleBars;
     if (mergedOptions.initialViewport === "center") {
       xCenter = count / 2;
     } else {
@@ -1031,6 +1043,17 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    const brandLogoWidth = 34;
+    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
+    const brandLogoX = chartLeft + 16;
+    const brandLogoY = chartBottom - brandLogoHeight - 10;
+    ctx.save();
+    ctx.translate(brandLogoX, brandLogoY);
+    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill(brandLogoPathA);
+    ctx.fill(brandLogoPathB);
+    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1091,8 +1114,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const anchorRatio = clamp((anchorX - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const anchorIndex = drawState.xStart + anchorRatio * xSpan;
@@ -1106,8 +1129,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const rightEdgeIndex = data.length + rightEdgePaddingBars;
     const nextStart = rightEdgeIndex - nextSpan;
@@ -1156,6 +1179,64 @@ function createChart(element, options = {}) {
     }
     draw();
   };
+  const resetYViewport = () => {
+    yMinOverride = null;
+    yMaxOverride = null;
+    autoYMin = null;
+    autoYMax = null;
+  };
+  const zoomInX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(1 / Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomOutX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomInY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(1 / Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const zoomOutY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const panX = (bars) => {
+    if (!Number.isFinite(bars) || bars === 0) {
+      return;
+    }
+    xCenter += bars;
+    clampXViewport();
+    draw();
+  };
+  const panY = (priceDelta) => {
+    if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
+      return;
+    }
+    const currentMin = yMinOverride ?? drawState.yMin;
+    const currentMax = yMaxOverride ?? drawState.yMax;
+    const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
+    yMinOverride = clamped.min;
+    yMaxOverride = clamped.max;
+    draw();
+  };
+  const fitContent = () => {
+    fitXViewport();
+    draw();
+  };
+  const resetViewport = () => {
+    fitXViewport();
+    resetYViewport();
+    draw();
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -1499,19 +1580,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "y-axis") {
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
-    fitXViewport();
-    yMinOverride = null;
-    yMaxOverride = null;
-    autoYMin = null;
-    autoYMax = null;
-    draw();
+    resetViewport();
   };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
@@ -1535,19 +1608,13 @@ function createChart(element, options = {}) {
     if (data.length === 0) {
       xCenter = 0;
       xSpan = 60;
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
     if (!hadData) {
       fitXViewport();
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
         clampXViewport();
@@ -1646,6 +1713,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/docs/API.md

@@ -29,17 +29,20 @@ Top-level options:
 
 - `width` (default `720`)
 - `height` (default `360`)
-- `backgroundColor` (default `#ffffff`)
+- `backgroundColor` (default `#101114`)
 - `axisColor` (legacy shorthand for axis line/text color)
 - `axis?: AxisOptions`
 - `priceDecimals` (default `2`, used for axis/ticker/line price labels)
 - `initialViewport` (`"latest"` | `"center"`, default `"latest"`)
 - `initialVisibleBars` (default `60`)
+- `minVisibleBars` (default `5`, lower clamp for x zoom)
+- `maxVisibleBars` (default `20000`, upper clamp for x zoom)
+- `maxPanBars` (default `1000000`, max bars allowed to pan beyond data)
 - `rightEdgePaddingBars` (default `2`, used by latest-anchored viewport)
 - `preserveViewportOnDataUpdate` (default `true`; set `false` to auto-fit on each `setData`)
-- `upColor` (default `#16a34a`)
-- `downColor` (default `#dc2626`)
-- `gridColor` (default `#e2e8f0`)
+- `upColor` (default `#2fb171`)
+- `downColor` (default `#d35a5a`)
+- `gridColor` (default `#252932`)
 - `fontFamily`
 - `candleBodyWidthRatio` (default `0.7`)
 - `candleMinWidth` (default `0.5`)
@@ -57,15 +60,15 @@ Top-level options:
 
 ### `AxisOptions`
 
-- `lineColor` (default `#94a3b8`)
-- `textColor` (default `#94a3b8`)
+- `lineColor` (default `#3b3f47`)
+- `textColor` (default `#a9adb6`)
 - `fontSize` (default `12`)
 - `lineWidth` (default `1`)
 
 ### `GridOptions`
 
-- `color` (default `#e2e8f0`)
-- `opacity` (default `0.9`)
+- `color` (default `#2b2f38`)
+- `opacity` (default `0.38`)
 - `horizontalLines` (default `true`)
 - `verticalLines` (default `true`)
 - `horizontalTickCount` (default `5`)
@@ -104,6 +107,18 @@ Top-level options:
 - `imageTintColor` (default `""`, set `"#ffffff"` for white logo tint)
 - `imageTintOpacity` (default `1`)
 
+Example:
+
+```ts
+watermark: {
+  visible: true,
+  imageSrc: "/logo-white.svg",
+  opacity: 0.14,
+  imageTintColor: "#ffffff",
+  imageTintOpacity: 1
+}
+```
+
 ### `TickerLineOptions`
 
 - `visible` (default `true`)
@@ -213,6 +228,14 @@ Connector/fill visuals:
 - `onOrderAction(handler: ((event: OrderActionEvent) => void) | null): void`
 - `onChartClick(handler: ((event: ChartClickEvent) => void) | null): void`
 - `onCrosshairMove(handler: ((event: CrosshairMoveEvent) => void) | null): void`
+- `zoomInX(factor?: number): void` (default factor `1.25`)
+- `zoomOutX(factor?: number): void` (default factor `1.25`)
+- `zoomInY(factor?: number): void` (default factor `1.25`)
+- `zoomOutY(factor?: number): void` (default factor `1.25`)
+- `panX(bars: number): void` (negative = left, positive = right)
+- `panY(priceDelta: number): void` (positive = move viewport up)
+- `fitContent(): void` (x-only fit, keeps y zoom)
+- `resetViewport(): void` (fit x + reset y auto-scale)
 - `setDoubleClickEnabled(enabled: boolean): void`
 - `setDoubleClickAction(action: "reset" | "placeLimitOrder"): void`
 - `resize(width?: number, height?: number): void`

package/docs/assets/logo-white.svg

@@ -0,0 +1,4 @@
+<svg width="190" height="186" viewBox="0 0 190 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z" fill="white"/>
+<path d="M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z" fill="white"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",