diff --git a/packages/ts/src/components/crosshair/style.ts b/packages/ts/src/components/crosshair/style.ts
index 64a297e33..4dca8a19e 100644
--- a/packages/ts/src/components/crosshair/style.ts
+++ b/packages/ts/src/components/crosshair/style.ts
@@ -3,7 +3,9 @@ import { css, injectGlobal } from '@emotion/css'
export const globalStyles = injectGlobal`
:root {
--vis-crosshair-line-stroke-color: #888;
+ --vis-crosshair-line-stroke-width: 1px;
--vis-crosshair-circle-stroke-color: #fff;
+ --vis-crosshair-circle-stroke-width: 1px;
}
`
@@ -13,13 +15,14 @@ export const root = css`
export const line = css`
stroke: var(--vis-crosshair-line-stroke-color);
+ stroke-width: var(--vis-crosshair-line-stroke-width);
stroke-opacity: 1;
pointer-events: none;
`
export const circle = css`
stroke: var(--vis-crosshair-circle-stroke-color);
- stroke-width: 1;
+ stroke-width: var(--vis-crosshair-circle-stroke-width);
stroke-opacity: 0.75;
pointer-events: none;
`
diff --git a/packages/website/docs/auxiliary/Crosshair.mdx b/packages/website/docs/auxiliary/Crosshair.mdx
index 77243b621..3db407a2f 100644
--- a/packages/website/docs/auxiliary/Crosshair.mdx
+++ b/packages/website/docs/auxiliary/Crosshair.mdx
@@ -75,7 +75,9 @@ The _Crosshair_ component supports additional styling via CSS variables that you
All supported CSS variables and their default values
{
`--vis-crosshair-line-stroke-color: #888;
---vis-crosshair-circle-stroke-color: #fff;`
+--vis-crosshair-line-stroke-width: 1px;
+--vis-crosshair-circle-stroke-color: #fff;
+--vis-crosshair-circle-stroke-width: 1px;`
}