Customize strokeWidth

[LoiKos]

Hi,
I'm using '@visx/xychart' in version "^1.10.0" and i was trying to set custom tick width but i didn't make it.

I tried by adding strokeWidth in theme like :

const theme = buildChartTheme({
  backgroundColor: '#fff',
  colors: [
    hexRgb('#4580E6', { format: 'css', alpha: 0.6 }),
    hexRgb('#15B371', { format: 'css', alpha: 0.6 }),
    hexRgb('#15B371', { format: 'css', alpha: 0.6 }),
    hexRgb('#F29D49', { format: 'css', alpha: 0.6 }),
    hexRgb('#F29D49', { format: 'css', alpha: 0.6 }),
    '#182026',
  ],
  gridColor: '#30404D',
  gridColorDark: '#30404D',
  tickLength: 8,
  xTickLineStyles: { strokeWidth: 2 }, // Not working
}) 

Should i use a custom tick component to do that ?

CodeSandbox : https://codesandbox.io/s/blazing-snow-mvsuq?file=/src/App.tsx

[williaster]

Hey @LoiKos great question! I was just looking into why this doesn't work and surprisingly we don't actually support overriding this any way except with className/old-school css (see this modified sandbox).

This is the relevant line of code that would need to take in the tickLineProps, if you or anyone else is interested in adding this to @visx/axis it would then be useable through @visx/xychart as well.

[LoiKos]

I have done a PR on that : #1211