svelteplot · gka · May 29, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,7 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"

diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
         "svelte-highlight": "^7.8.3",
         "svg-path-parser": "^1.1.0",
         "topojson-client": "^3.1.0",
+        "ts-essentials": "^10.0.4",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.5",
         "typedoc-plugin-markdown": "^4.6.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
@@ -2,6 +2,7 @@
     Renders a horizontal axis with labels and tick marks
 -->
 <script module lang="ts">
+    import type { XOR } from 'ts-essentials';
     export type AxisXMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
@@ -22,7 +23,16 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
-    };
+    } & XOR<
+            {
+                /** approximate number of ticks to be generated */
+                tickCount?: number;
+            },
+            {
+                /** approximate number of pixels between generated ticks */
+                tickSpacing?: number;
+            }
+        >;
 </script>
 
 <script lang="ts">
@@ -64,14 +74,20 @@
         tickFormat,
         tickClass,
         class: className,
+        tickCount,
+        tickSpacing,
         ...options
     }: AxisXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
     const autoTickCount = $derived(
-        Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
+        tickCount != null
+            ? tickCount
+            : tickSpacing != null
+              ? Math.max(3, Math.round(plot.facetWidth / tickSpacing))
+              : Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
     const ticks: RawValue[] = $derived(

diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
@@ -2,6 +2,7 @@
     Renders a vertical axis with labels and tick marks
 -->
 <script module lang="ts">
+    import type { XOR } from 'ts-essentials';
     export type AxisYMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
@@ -23,7 +24,16 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
-    };
+    } & XOR<
+            {
+                /** approximate number of ticks to be generated */
+                tickCount?: number;
+            },
+            {
+                /** approximate number of pixels between generated ticks */
+                tickSpacing?: number;
+            }
+        >;
 </script>
 
 <script lang="ts">
@@ -56,20 +66,27 @@
         title,
         anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
         facetAnchor = 'auto',
+        interval,
         lineAnchor = 'center',
         tickSize = DEFAULTS.tickSize,
         tickFontSize = DEFAULTS.tickFontSize,
         tickPadding = DEFAULTS.tickPadding,
         tickFormat,
         tickClass,
+        tickCount,
+        tickSpacing,
         ...options
     }: AxisYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
     const autoTickCount = $derived(
-        Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
+        tickCount != null
+            ? tickCount
+            : tickSpacing != null
+              ? Math.max(3, Math.round(plot.facetHeight / tickSpacing))
+              : Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
     const ticks: RawValue[] = $derived(
@@ -80,7 +97,7 @@
               autoTicks(
                   plot.scales.y.type,
                   plot.options.y.ticks,
-                  plot.options.y.interval,
+                  interval || plot.options.y.interval,
                   plot.scales.y.domain,
                   plot.scales.y.fn,
                   autoTickCount

diff --git a/src/routes/examples/axis/tick-count.svelte b/src/routes/examples/axis/tick-count.svelte
@@ -0,0 +1,15 @@
+<script module>
+    export const title = 'Tick count';
+</script>
+
+<script>
+    import { Plot, AxisX, AxisY, Line } from 'svelteplot';
+    import { page } from '$app/state';
+    let { aapl } = $derived(page.data.data);
+</script>
+
+<Plot marginTop={30}>
+    <AxisY tickCount={20} />
+    <AxisX tickCount={2} />
+    <Line data={aapl} x="Date" y="Close" />
+</Plot>
diff --git a/src/routes/examples/axis/tick-interval.svelte b/src/routes/examples/axis/tick-interval.svelte
@@ -0,0 +1,15 @@
+<script module>
+    export const title = 'Tick interval';
+</script>
+
+<script>
+    import { Plot, AxisX, AxisY, Line } from 'svelteplot';
+    import { page } from '$app/state';
+    let { aapl } = $derived(page.data.data);
+</script>
+
+<Plot>
+    <AxisX interval="6 months" />
+    <AxisY interval={25} />
+    <Line data={aapl} x="Date" y="Close" />
+</Plot>