svelteplot
diff --git a/‎src/lib/marks/AxisX.svelte
Lines changed: 1 addition & 1 deletion b/‎src/lib/marks/AxisX.svelte
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/routes/examples/axis/tick-classes.svelte
Lines changed: 24 additions & 0 deletions b/‎src/routes/examples/axis/tick-classes.svelte
Lines changed: 24 additions & 0 deletions
diff --git a/‎src/routes/examples/axis/ticks-inside.svelte
Lines changed: 0 additions & 1 deletion b/‎src/routes/examples/axis/ticks-inside.svelte
Lines changed: 0 additions & 1 deletion
diff --git a/‎static/examples/axis/tick-classes.dark.png
6.72 KB b/‎static/examples/axis/tick-classes.dark.png
6.72 KB
diff --git a/‎static/examples/axis/tick-classes.png
6.34 KB b/‎static/examples/axis/tick-classes.png
6.34 KB
@@ -44,7 +44,7 @@
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];
         /** set to false or null to disable tick labels */
-        text: boolean | null;
+        text?: boolean | null;
         /** approximate number of ticks to be generated */
         tickCount?: number;
         /** approximate number of pixels between generated ticks */
 
@@ -0,0 +1,24 @@
+<script module>
+    export const title = 'Tick classes';
+</script>
+
+<script>
+    import { Plot, AxisX } from 'svelteplot';
+</script>
+
+<Plot marginTop={30} x={{ domain: [-100, 100] }}>
+    <AxisX
+        tickClass={(d) =>
+            d < 0 ? 'negative' : 'positive'} />
+</Plot>
+
+<style>
+    :global {
+        .tick.negative {
+            color: var(--svp-red) !important;
+        }
+        .tick.positive {
+            color: var(--svp-blue) !important;
+        }
+    }
+</style>
@@ -5,7 +5,6 @@
 <script>
     import { Plot, AxisY, Line } from 'svelteplot';
     import { page } from '$app/state';
-    import { setContext } from 'svelte';
 
     let { aapl } = $derived(page.data.data);
 </script>