reactjsreact-nativevictory-native

Is it possible to add corner radius to VictoryCandlestick?


I need to do this chart:

https://user-images.githubusercontent.com/33124078/163879536-497375de-cf3d-4c50-84ff-30b6e8ca4a5a.png

But I'm stuck on a graph like this:

https://user-images.githubusercontent.com/33124078/163890049-74bb69c0-9753-403f-9e29-dde9ad542edc.png

Is it possible to add the circular radius to the chart with Victory?

This is my current implementation for candles:

<VictoryCandlestick
   candleColors={{ positive: "#EF3F23", negative: "#EF3F23" }}
   candleRatio={0.4}
   style={{ data: { strokeWidth: 0 } }}
   data={data}
/>

Solution

  • under the packages/victory-native/src/components/victory-primitives/rect.js

    add property in the Rect under return

    <Rect
       vectorEffect="non-scaling-stroke"
       accessible={accessibilityLabel || undefined}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityLabel && desc ? desc : undefined}
       {...rest}
       {...nativeStyle}
       rx=5
     />
    

    hope it will work.