hyperprop-charting-library 0.1.26 → 0.1.28

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
@@ -142,6 +153,7 @@ Volume scaling tip (for large spikes):
 chart.updateIndicator(volumeId, {
   inputs: {
     scaleMode: "visible",   // default; scales using current viewport only
+    scaleType: "sqrt",      // default; balanced compression
     clampPercentile: 0.95   // optional outlier clamp
   }
 });

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",
@@ -531,6 +533,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -541,6 +544,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     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;
@@ -556,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)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1553,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"
@@ -1748,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();
@@ -1767,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;
@@ -1909,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",
@@ -507,6 +509,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -517,6 +520,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     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;
@@ -532,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)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1529,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"
@@ -1724,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();
@@ -1743,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;
@@ -1885,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",
@@ -531,6 +533,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -541,6 +544,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     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;
@@ -556,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)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1553,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"
@@ -1748,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();
@@ -1767,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;
@@ -1909,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",
@@ -507,6 +509,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -517,6 +520,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     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;
@@ -532,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)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -1529,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"
@@ -1724,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();
@@ -1743,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;
@@ -1885,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`
 
@@ -310,6 +312,7 @@ Volume style inputs:
 - `minBarWidth`
 - `overlayHeightRatio` (when used as overlay)
 - `scaleMode` (`"visible"` default, or `"full"`)
+- `scaleType` (`"sqrt"` default, or `"log"` / `"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 }
 });
 ```
 
@@ -143,6 +151,7 @@ const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.
 ```ts
 const volumeId = chart.addIndicator("volume", {
   scaleMode: "visible",   // default behavior
+  scaleType: "sqrt",      // default behavior
   clampPercentile: 0.95   // clamp scaling reference to p95 of visible bars
 });
 ```

package/package.json

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