hyperprop-charting-library 0.1.25 → 0.1.27

package/README.md

@@ -94,6 +94,17 @@ const chart = createChart(root, {
 });
 ```
 
+## Axis Label Density
+
+```ts
+const chart = createChart(root, {
+  grid: {
+    xTickCount: 8, // bottom labels/grid intervals
+    yTickCount: 6  // right-side price labels/grid intervals
+  }
+});
+```
+
 ## Crosshair "+" Button
 
 ```ts
@@ -136,6 +147,18 @@ chart.updateIndicator(emaId, { inputs: { length: 55 } });
 chart.updateIndicator(volumeId, { paneHeightRatio: 0.1 });
 ```
 
+Volume scaling tip (for large spikes):
+
+```ts
+chart.updateIndicator(volumeId, {
+  inputs: {
+    scaleMode: "visible",   // default; scales using current viewport only
+    scaleType: "log",       // default; better for large volume ranges
+    clampPercentile: 0.95   // optional outlier clamp
+  }
+});
+```
+
 Autoscale controls per indicator:
 
 ```ts

package/dist/hyperprop-charting-library.cjs

@@ -28,7 +28,9 @@ var DEFAULT_GRID_OPTIONS = {
   opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
-  horizontalTickCount: 5
+  xTickCount: 8,
+  yTickCount: 6,
+  horizontalTickCount: 6
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -509,6 +511,15 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
   }
   ctx.restore();
 };
+var getPercentileValue = (values, percentile) => {
+  if (values.length === 0) {
+    return 1;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const clamped = Math.min(1, Math.max(0, percentile));
+  const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(clamped * sorted.length) - 1));
+  return sorted[index] ?? 1;
+};
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
@@ -520,7 +531,10 @@ var BUILTIN_VOLUME_INDICATOR = {
     upColor: "",
     downColor: "",
     minBarWidth: 1,
-    overlayHeightRatio: 0.22
+    overlayHeightRatio: 0.22,
+    scaleMode: "visible",
+    scaleType: "log",
+    clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
@@ -529,8 +543,12 @@ var BUILTIN_VOLUME_INDICATOR = {
     const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
-    const visiblePoints = data.slice(startIndex, endIndex + 1);
-    const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
+    const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
+    const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
+    const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
+    const maxVolume = Math.max(1, getPercentileValue(scalingVolumes, clampPercentile));
     const barWidth = Math.max(
       Math.max(1, Number(inputs.minBarWidth) || 1),
       Math.min(Math.max(1, candleSpacing - 1), Math.floor(candleSpacing * 0.7))
@@ -542,7 +560,8 @@ var BUILTIN_VOLUME_INDICATOR = {
       if (!point || point.v === void 0 || point.v <= 0) {
         continue;
       }
-      const ratio = Math.min(1, Math.max(0, point.v / maxVolume));
+      const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1539,7 +1558,7 @@ function createChart(element, options = {}) {
     const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
     const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
-    const paneGap = 8;
+    const paneGap = 0;
     const separatePaneSpacing = 6;
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
@@ -1734,7 +1753,8 @@ function createChart(element, options = {}) {
     );
     const grid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
     const gridOpacity = clamp(grid.opacity, 0, 1);
-    const yTicks = Math.max(1, Math.floor(grid.horizontalTickCount));
+    const yTickCountInput = grid.yTickCount ?? grid.horizontalTickCount;
+    const yTicks = Math.max(1, Math.floor(yTickCountInput));
     const gridColor = grid.color ?? mergedOptions.gridColor;
     if (grid.horizontalLines) {
       ctx.save();
@@ -1753,8 +1773,10 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     const minLabelSpacingPx = Math.max(72, candleSpacing * 6);
-    const approxLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
-    const rawStep = xSpan / approxLabelCount;
+    const autoLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
+    const xTickCountInput = grid.xTickCount ?? autoLabelCount;
+    const xTickCount = Math.max(2, Math.floor(xTickCountInput));
+    const rawStep = xSpan / xTickCount;
     const xStep = Math.max(1, Math.ceil(rawStep));
     const visibleTickStart = Math.floor(xStart);
     const visibleTickEnd = Math.ceil(xEnd) - 1;
@@ -1895,6 +1917,18 @@ function createChart(element, options = {}) {
         ctx.restore();
       });
     }
+    if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      ctx.save();
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(cx), crisp(chartTop));
+      ctx.lineTo(crisp(cx), crisp(fullChartBottom));
+      ctx.stroke();
+      ctx.restore();
+    }
     ctx.strokeStyle = axis.lineColor;
     ctx.lineWidth = Math.max(1, axis.lineWidth);
     ctx.beginPath();

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

@@ -111,6 +111,8 @@ interface GridOptions {
     opacity?: number;
     horizontalLines?: boolean;
     verticalLines?: boolean;
+    xTickCount?: number;
+    yTickCount?: number;
     horizontalTickCount?: number;
 }
 interface CrosshairOptions {

package/dist/hyperprop-charting-library.js

@@ -4,7 +4,9 @@ var DEFAULT_GRID_OPTIONS = {
   opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
-  horizontalTickCount: 5
+  xTickCount: 8,
+  yTickCount: 6,
+  horizontalTickCount: 6
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -485,6 +487,15 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
   }
   ctx.restore();
 };
+var getPercentileValue = (values, percentile) => {
+  if (values.length === 0) {
+    return 1;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const clamped = Math.min(1, Math.max(0, percentile));
+  const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(clamped * sorted.length) - 1));
+  return sorted[index] ?? 1;
+};
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
@@ -496,7 +507,10 @@ var BUILTIN_VOLUME_INDICATOR = {
     upColor: "",
     downColor: "",
     minBarWidth: 1,
-    overlayHeightRatio: 0.22
+    overlayHeightRatio: 0.22,
+    scaleMode: "visible",
+    scaleType: "log",
+    clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
@@ -505,8 +519,12 @@ var BUILTIN_VOLUME_INDICATOR = {
     const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
-    const visiblePoints = data.slice(startIndex, endIndex + 1);
-    const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
+    const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
+    const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
+    const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
+    const maxVolume = Math.max(1, getPercentileValue(scalingVolumes, clampPercentile));
     const barWidth = Math.max(
       Math.max(1, Number(inputs.minBarWidth) || 1),
       Math.min(Math.max(1, candleSpacing - 1), Math.floor(candleSpacing * 0.7))
@@ -518,7 +536,8 @@ var BUILTIN_VOLUME_INDICATOR = {
       if (!point || point.v === void 0 || point.v <= 0) {
         continue;
       }
-      const ratio = Math.min(1, Math.max(0, point.v / maxVolume));
+      const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1515,7 +1534,7 @@ function createChart(element, options = {}) {
     const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
     const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
-    const paneGap = 8;
+    const paneGap = 0;
     const separatePaneSpacing = 6;
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
@@ -1710,7 +1729,8 @@ function createChart(element, options = {}) {
     );
     const grid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
     const gridOpacity = clamp(grid.opacity, 0, 1);
-    const yTicks = Math.max(1, Math.floor(grid.horizontalTickCount));
+    const yTickCountInput = grid.yTickCount ?? grid.horizontalTickCount;
+    const yTicks = Math.max(1, Math.floor(yTickCountInput));
     const gridColor = grid.color ?? mergedOptions.gridColor;
     if (grid.horizontalLines) {
       ctx.save();
@@ -1729,8 +1749,10 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     const minLabelSpacingPx = Math.max(72, candleSpacing * 6);
-    const approxLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
-    const rawStep = xSpan / approxLabelCount;
+    const autoLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
+    const xTickCountInput = grid.xTickCount ?? autoLabelCount;
+    const xTickCount = Math.max(2, Math.floor(xTickCountInput));
+    const rawStep = xSpan / xTickCount;
     const xStep = Math.max(1, Math.ceil(rawStep));
     const visibleTickStart = Math.floor(xStart);
     const visibleTickEnd = Math.ceil(xEnd) - 1;
@@ -1871,6 +1893,18 @@ function createChart(element, options = {}) {
         ctx.restore();
       });
     }
+    if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      ctx.save();
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(cx), crisp(chartTop));
+      ctx.lineTo(crisp(cx), crisp(fullChartBottom));
+      ctx.stroke();
+      ctx.restore();
+    }
     ctx.strokeStyle = axis.lineColor;
     ctx.lineWidth = Math.max(1, axis.lineWidth);
     ctx.beginPath();

package/dist/index.cjs

@@ -28,7 +28,9 @@ var DEFAULT_GRID_OPTIONS = {
   opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
-  horizontalTickCount: 5
+  xTickCount: 8,
+  yTickCount: 6,
+  horizontalTickCount: 6
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -509,6 +511,15 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
   }
   ctx.restore();
 };
+var getPercentileValue = (values, percentile) => {
+  if (values.length === 0) {
+    return 1;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const clamped = Math.min(1, Math.max(0, percentile));
+  const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(clamped * sorted.length) - 1));
+  return sorted[index] ?? 1;
+};
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
@@ -520,7 +531,10 @@ var BUILTIN_VOLUME_INDICATOR = {
     upColor: "",
     downColor: "",
     minBarWidth: 1,
-    overlayHeightRatio: 0.22
+    overlayHeightRatio: 0.22,
+    scaleMode: "visible",
+    scaleType: "log",
+    clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
@@ -529,8 +543,12 @@ var BUILTIN_VOLUME_INDICATOR = {
     const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
-    const visiblePoints = data.slice(startIndex, endIndex + 1);
-    const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
+    const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
+    const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
+    const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
+    const maxVolume = Math.max(1, getPercentileValue(scalingVolumes, clampPercentile));
     const barWidth = Math.max(
       Math.max(1, Number(inputs.minBarWidth) || 1),
       Math.min(Math.max(1, candleSpacing - 1), Math.floor(candleSpacing * 0.7))
@@ -542,7 +560,8 @@ var BUILTIN_VOLUME_INDICATOR = {
       if (!point || point.v === void 0 || point.v <= 0) {
         continue;
       }
-      const ratio = Math.min(1, Math.max(0, point.v / maxVolume));
+      const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1539,7 +1558,7 @@ function createChart(element, options = {}) {
     const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
     const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
-    const paneGap = 8;
+    const paneGap = 0;
     const separatePaneSpacing = 6;
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
@@ -1734,7 +1753,8 @@ function createChart(element, options = {}) {
     );
     const grid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
     const gridOpacity = clamp(grid.opacity, 0, 1);
-    const yTicks = Math.max(1, Math.floor(grid.horizontalTickCount));
+    const yTickCountInput = grid.yTickCount ?? grid.horizontalTickCount;
+    const yTicks = Math.max(1, Math.floor(yTickCountInput));
     const gridColor = grid.color ?? mergedOptions.gridColor;
     if (grid.horizontalLines) {
       ctx.save();
@@ -1753,8 +1773,10 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     const minLabelSpacingPx = Math.max(72, candleSpacing * 6);
-    const approxLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
-    const rawStep = xSpan / approxLabelCount;
+    const autoLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
+    const xTickCountInput = grid.xTickCount ?? autoLabelCount;
+    const xTickCount = Math.max(2, Math.floor(xTickCountInput));
+    const rawStep = xSpan / xTickCount;
     const xStep = Math.max(1, Math.ceil(rawStep));
     const visibleTickStart = Math.floor(xStart);
     const visibleTickEnd = Math.ceil(xEnd) - 1;
@@ -1895,6 +1917,18 @@ function createChart(element, options = {}) {
         ctx.restore();
       });
     }
+    if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      ctx.save();
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(cx), crisp(chartTop));
+      ctx.lineTo(crisp(cx), crisp(fullChartBottom));
+      ctx.stroke();
+      ctx.restore();
+    }
     ctx.strokeStyle = axis.lineColor;
     ctx.lineWidth = Math.max(1, axis.lineWidth);
     ctx.beginPath();

package/dist/index.d.cts

@@ -111,6 +111,8 @@ interface GridOptions {
     opacity?: number;
     horizontalLines?: boolean;
     verticalLines?: boolean;
+    xTickCount?: number;
+    yTickCount?: number;
     horizontalTickCount?: number;
 }
 interface CrosshairOptions {

package/dist/index.d.ts

@@ -111,6 +111,8 @@ interface GridOptions {
     opacity?: number;
     horizontalLines?: boolean;
     verticalLines?: boolean;
+    xTickCount?: number;
+    yTickCount?: number;
     horizontalTickCount?: number;
 }
 interface CrosshairOptions {

package/dist/index.js

@@ -4,7 +4,9 @@ var DEFAULT_GRID_OPTIONS = {
   opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
-  horizontalTickCount: 5
+  xTickCount: 8,
+  yTickCount: 6,
+  horizontalTickCount: 6
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -485,6 +487,15 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
   }
   ctx.restore();
 };
+var getPercentileValue = (values, percentile) => {
+  if (values.length === 0) {
+    return 1;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const clamped = Math.min(1, Math.max(0, percentile));
+  const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(clamped * sorted.length) - 1));
+  return sorted[index] ?? 1;
+};
 var BUILTIN_VOLUME_INDICATOR = {
   id: "volume",
   name: "Volume",
@@ -496,7 +507,10 @@ var BUILTIN_VOLUME_INDICATOR = {
     upColor: "",
     downColor: "",
     minBarWidth: 1,
-    overlayHeightRatio: 0.22
+    overlayHeightRatio: 0.22,
+    scaleMode: "visible",
+    scaleType: "log",
+    clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
     const { data, startIndex, endIndex, chartTop, chartBottom, candleSpacing, xFromIndex, upColor, downColor } = renderContext;
@@ -505,8 +519,12 @@ var BUILTIN_VOLUME_INDICATOR = {
     const overlayHeightRatio = Math.min(0.45, Math.max(0.08, Number(inputs.overlayHeightRatio) || 0.22));
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
-    const visiblePoints = data.slice(startIndex, endIndex + 1);
-    const maxVolume = Math.max(1, ...visiblePoints.map((point) => point.v ?? 0));
+    const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
+    const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
+    const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
+    const maxVolume = Math.max(1, getPercentileValue(scalingVolumes, clampPercentile));
     const barWidth = Math.max(
       Math.max(1, Number(inputs.minBarWidth) || 1),
       Math.min(Math.max(1, candleSpacing - 1), Math.floor(candleSpacing * 0.7))
@@ -518,7 +536,8 @@ var BUILTIN_VOLUME_INDICATOR = {
       if (!point || point.v === void 0 || point.v <= 0) {
         continue;
       }
-      const ratio = Math.min(1, Math.max(0, point.v / maxVolume));
+      const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1515,7 +1534,7 @@ function createChart(element, options = {}) {
     const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
     const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
-    const paneGap = 8;
+    const paneGap = 0;
     const separatePaneSpacing = 6;
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
@@ -1710,7 +1729,8 @@ function createChart(element, options = {}) {
     );
     const grid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
     const gridOpacity = clamp(grid.opacity, 0, 1);
-    const yTicks = Math.max(1, Math.floor(grid.horizontalTickCount));
+    const yTickCountInput = grid.yTickCount ?? grid.horizontalTickCount;
+    const yTicks = Math.max(1, Math.floor(yTickCountInput));
     const gridColor = grid.color ?? mergedOptions.gridColor;
     if (grid.horizontalLines) {
       ctx.save();
@@ -1729,8 +1749,10 @@ function createChart(element, options = {}) {
       ctx.restore();
     }
     const minLabelSpacingPx = Math.max(72, candleSpacing * 6);
-    const approxLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
-    const rawStep = xSpan / approxLabelCount;
+    const autoLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
+    const xTickCountInput = grid.xTickCount ?? autoLabelCount;
+    const xTickCount = Math.max(2, Math.floor(xTickCountInput));
+    const rawStep = xSpan / xTickCount;
     const xStep = Math.max(1, Math.ceil(rawStep));
     const visibleTickStart = Math.floor(xStart);
     const visibleTickEnd = Math.ceil(xEnd) - 1;
@@ -1871,6 +1893,18 @@ function createChart(element, options = {}) {
         ctx.restore();
       });
     }
+    if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      ctx.save();
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(cx), crisp(chartTop));
+      ctx.lineTo(crisp(cx), crisp(fullChartBottom));
+      ctx.stroke();
+      ctx.restore();
+    }
     ctx.strokeStyle = axis.lineColor;
     ctx.lineWidth = Math.max(1, axis.lineWidth);
     ctx.beginPath();

package/docs/API.md

@@ -81,7 +81,9 @@ Top-level options:
 - `opacity` (default `0.38`)
 - `horizontalLines` (default `true`)
 - `verticalLines` (default `true`)
-- `horizontalTickCount` (default `5`)
+- `xTickCount` (default `8`, x-axis label/grid density)
+- `yTickCount` (default `6`, y-axis label/grid density)
+- `horizontalTickCount` (legacy alias for `yTickCount`)
 
 ### `CrosshairOptions`
 
@@ -309,6 +311,9 @@ Volume style inputs:
 - `upColor`, `downColor`
 - `minBarWidth`
 - `overlayHeightRatio` (when used as overlay)
+- `scaleMode` (`"visible"` default, or `"full"`)
+- `scaleType` (`"log"` default, or `"linear"`)
+- `clampPercentile` (`0..1`, default `1`; e.g. `0.95` to reduce outlier crush)
 
 ---
 

package/docs/RECIPES.md

@@ -11,7 +11,15 @@ const chart = createChart(rootEl, {
   backgroundColor: "#101114",
   upColor: "#2fb171",
   downColor: "#d35a5a",
-  grid: { opacity: 0.35, horizontalTickCount: 4 }
+  grid: { opacity: 0.35, xTickCount: 8, yTickCount: 6 }
+});
+```
+
+Tune axis density when creating the chart:
+
+```ts
+const chartDense = createChart(rootEl, {
+  grid: { xTickCount: 10, yTickCount: 8 }
 });
 ```
 
@@ -138,6 +146,16 @@ const rsiId = chart.addIndicator("rsi", { length: 14 }, { pane: "separate", pane
 const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.72 });
 ```
 
+## Prevent one volume spike from crushing all bars
+
+```ts
+const volumeId = chart.addIndicator("volume", {
+  scaleMode: "visible",   // default behavior
+  scaleType: "log",       // default behavior
+  clampPercentile: 0.95   // clamp scaling reference to p95 of visible bars
+});
+```
+
 Available built-ins:
 
 - `volume`, `sma`, `ema`, `rsi`, `wma`, `vwma`, `rma`, `hma`, `stddev`, `atr`

package/package.json

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