new(axis): enable customization of tickLineProps

packages/visx-axis/src/axis/AxisRenderer.tsx

@@ -34,6 +34,7 @@ export default function AxisRenderer<Scale extends AxisScale>({
   strokeWidth = 1,
   tickClassName,
   tickComponent,
+  tickLineProps,
   tickLabelProps = (/** tickValue, index, tickValues */) => defaultTextProps,
   tickLength = 8,
   tickStroke = '#222',
@@ -60,6 +61,8 @@ export default function AxisRenderer<Scale extends AxisScale>({
         tickStroke,
         tickTransform,
         ticks,
+        strokeWidth,
+        tickLineProps,
       })}
 
       {!hideAxisLine && (

packages/visx-axis/src/axis/Ticks.tsx

@@ -17,6 +17,8 @@ export default function Ticks<Scale extends AxisScale>({
   tickStroke = '#222',
   tickTransform,
   ticks,
+  strokeWidth,
+  tickLineProps,
 }: TicksRendererProps<Scale>) {
   return ticks.map(({ value, index, from, to, formattedValue }) => {
     const tickLabelProps = allTickLabelProps[index] ?? {};
@@ -34,7 +36,16 @@ export default function Ticks<Scale extends AxisScale>({
         className={cx('visx-axis-tick', tickClassName)}
         transform={tickTransform}
       >
-        {!hideTicks && <Line from={from} to={to} stroke={tickStroke} strokeLinecap="square" />}
+        {!hideTicks && (
+          <Line
+            from={from}
+            to={to}
+            stroke={tickStroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="square"
+            {...tickLineProps}
+          />
+        )}
         {tickComponent ? (
           tickComponent({
             ...tickLabelProps,

packages/visx-axis/src/types.ts

@@ -10,6 +10,7 @@ export type AxisScaleOutput = number | NumberLike | undefined;
 export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   D3Scale<Output, any, any>;
+type LineProps = Omit<React.SVGProps<SVGLineElement>, 'to' | 'from'>;
 
 type FormattedValue = string | undefined;
 
@@ -44,6 +45,8 @@ export type TicksRendererProps<Scale extends AxisScale> = {
   | 'tickStroke'
   | 'tickTransform'
   | 'ticks'
+  | 'strokeWidth'
+  | 'tickLineProps'
 >;
 
 export type CommonProps<Scale extends AxisScale> = {
@@ -75,6 +78,8 @@ export type CommonProps<Scale extends AxisScale> = {
   strokeWidth?: number | string;
   /** The pattern of dashes in the stroke. */
   strokeDasharray?: string;
+  /** Props to be applied to individual tick lines. */
+  tickLineProps?: LineProps;
   /** The class name applied to each tick group. */
   tickClassName?: string;
   /** Override the component used to render tick labels (instead of <Text /> from @visx/text). */

packages/visx-axis/test/Axis.test.tsx

@@ -1,11 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import { Line } from '@visx/shape';
 import { Text } from '@visx/text';
 import { scaleBand, scaleLinear } from '@visx/scale';
 import { Axis } from '../src';
 
+const getTickLine = (
+  wrapper: ShallowWrapper<unknown, Readonly<{}>, React.Component<{}, {}, unknown>>,
+) =>
+  wrapper
+    .children()
+    .find('.visx-axis-tick')
+    .not('.visx-axis-line')
+    .find('Line')
+    .first();
+
 const axisProps = {
   orientation: 'left' as const,
   scale: scaleLinear({
@@ -206,6 +216,29 @@ describe('<Axis />', () => {
     ).toBe('0');
   });
 
+  test('tick default should follow parent', () => {
+    const wrapper = shallow(<Axis {...axisProps} strokeWidth={2} />);
+    expect(getTickLine(wrapper).prop('strokeWidth')).toBe(2);
+    expect(getTickLine(wrapper).prop('strokeLinecap')).toBe('square');
+  });
+
+  test('tick stroke width should be different parent and equal to tickStrokeWidth', () => {
+    const wrapper = shallow(
+      <Axis
+        {...axisProps}
+        strokeWidth={2}
+        tickLineProps={{ strokeWidth: 3, strokeLinecap: 'round' }}
+      />,
+    );
+    expect(getTickLine(wrapper).prop('strokeWidth')).toBe(3);
+    expect(getTickLine(wrapper).prop('strokeLinecap')).toBe('round');
+  });
+
+  test('default tick stroke width should be 1', () => {
+    const wrapper = shallow(<Axis {...axisProps} />);
+    expect(getTickLine(wrapper).prop('strokeWidth')).toBe(1);
+  });
+
   it('should use center if scale is band', () => {
     const wrapper = shallow(
       <Axis